html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>TodoList</title>
  8.     <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  9.     <link rel="stylesheet" href="./css/common.css">
  10.     <link rel="stylesheet" href="./css/index.css">
  11. </head>
  12. <body>
  13.     <div class="wrap">
  14.         <div class="list-hd">
  15.             <h2>TodoList</h2>
  16.             <a href="javascript:;" class="j-plus-btn fa fa-plus"></a>
  17.         </div>
  18.         <div class="input-wrap">
  19.             <div class="input-bd text-input">
  20.                 <input type="text" id="itemContent"/>
  21.             </div>
  22.             <div class="btn-bd add-btn">
  23.                 <button class="j-add-item">增加项目</button>
  24.             </div>
  25.         </div>
  26.             <div class="list-wrap">
  27.                 <ul class="item-list"></ul>
  28.             </div>
  31.     </div>
  32.     <script src="./js/untils.js"></script>
  33.     <script src="./js/index.js"></script>
  34. </body>
  35. </html>

common.css

body{
    margin: 0;
}

a{
    text-decoration: none;
}

ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p{
    margin: 0;
    font-weight: bold;
}
h1{
    margin: 0;
    font-weight: bold;
}
div{
    box-sizing: border-box;
}
input,button{
    outline: none;
    box-sizing: border-box;
    border: none;
}

index.css

.wrap{
    position: relative;
    width: 500px;
    height: 500px;
    margin: 50px auto;
    box-shadow:  0 0 5px #999;
    border-radius: 10px;
    overflow: hidden;
}
.list-hd{
    position: absolute;
    top: 0;
    left:0;
    height: 44px;
    width: 100%;
    background-color: #000;
    color: #fff;
    text-align: center;
    line-height: 44px;
}
.list-hd .fa-plus{
    position: absolute;
    top: 15px;
    right: 15px;
    color: #fff;
}
.input-wrap{
    display: none;
    position: relative;
    top: 44px;
    left: 0;
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #ddd;
}
.input-wrap .text-input{
    float: left;
    width: 410px;
    height: 100%;
    padding: 5px 5px 5px 10px;
}
.input-wrap .input-bd input{
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
}
.input-wrap .btn-bd{
    float: left;
    width: 90px;
    height: 100%;
    padding: 5px 5px 5px 10px;
}
.input-wrap .btn-bd button{
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    background-color: #fff;
}
.list-wrap{
    height: 456px;
    margin-top: 44px;   
    overflow: auto;
}
.list-wrap .item{
    height: 50px;
    position: relative;
}
.list-wrap .item:nth-child(odd),
.list-wrap .item:hover{
    background-color: #eee;
}
.list-wrap .item.active{
    background-color: #dff0d8;
}
.list-wrap .item .item-content{
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 100%;
    line-height: 50px;
    text-indent: 15px;
}
.list-wrap .item .btn-group{
    height: 100%;
    margin-left: 400px;
    line-height: 50px;
}
.list-wrap .item .btn-group a{
    margin-left: 15px;
}
.list-wrap .item .btn-group .edit-btn{
    color: green;
}
.list-wrap .item .btn-group .remove-btn{
    color: red;
}

untils.js

// 添加事件
function addEvent(el,type,fn) {
    if(el.addEventListener){
        el.addEventListener(type,fn,false);
    }else if(el.attachEvent){
        el.attachEvent('on'+type,function () {
            fn.call(el);
        })
    }else{
        el['on'+type] = fn;
    }
}
// 获取滚动坐标
function getScrollOffset(){
    if(window.pageXOffset){
        return{
            left:window.pageXOffset,
            top:window.pageYOffset
        }
    }else{
        return{
            left:document.body.scrollLeft + document.documentElement.scrollLeft,
            top:document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}
// 封装可视窗口尺寸
function getViewportSize(){
    if(window.innerWidth){
        return{
            width:window.innerWidth,
            height:window.innerHeight
        }
    }else{
        if(document.compatMode==='BackCompat'){
            return{
                width:document.body.clientWidth,
                height:document.body.clientHeight
            }
        }else{
            return {
                width:document.documentElement.clientWidth,
                height:document.documentElement.clientHeight
            }
        }
    }
}
//获取body大小
function getScrollSize(){
    if(document.body.scrollWidth){
        return {
            width:document.body.scrollWidth,
            height:document.body.scrollHeight
        }
    }else{
        return {
            width:document.documentElement.scrollWidth,
            height:document.documentElement.scrollHeight
        }
    }
}
// 获取子元素
function elemChildren(node){
    var temp = {
        'length': 0,
        'push': Array.prototype.push,
        'splice': Array.prototype.splice
    },
    len = node.childNodes.length;
    for(var i = 0;i<len;i++){
        var childItem = node.childNodes[i];
        if(childItem.nodeType === 1){
            temp[temp['length']] = childItem;
            temp['length']++;
              // temp.push(childItem); push方法
        }
    }
    return temp;
}
// 获取祖先元素
function elemParent(node,n){
    var type = typeof(n);
    if(type==='undefined'){
        return node.parentNode;
    }else if(n<=0|| type !=='number'){
        return undefined;
    }
    while(n){
        node = node.parentNode;
        n--;
    }
    return node;
}

index.js

init();

function init() {
    initTodoList;
}

var initTodoList = (function() {
    var plusBtn = document.getElementsByClassName('j-plus-btn')[0], //+号按钮输入框
        inputArea = document.getElementsByClassName('input-wrap')[0], //整个输入框
        addItem = document.getElementsByClassName('j-add-item')[0],
        itemContent = document.getElementById('itemContent'),
        oList = document.getElementsByClassName('item-list')[0],
        inputShow = false,
        isEdit = false,
        curIdx = null;
console.log(inputArea);

    addEvent(plusBtn, 'click', function () {
        if (inputShow) {
            showInput('close');
            restoreStatus();
        } else {
            showInput('open');
        }
    });

    addEvent(addItem, 'click', function () {
        var content = itemContent.value; //保存输入框的内容 
            contentLen = content.length;
            oItems = document.getElementsByClassName('item'),
            itemLen = oItems.length;

        if (contentLen <= 0) { //如果输入的值为空则不添加
            return;
        }

        if (itemLen > 0) {
            for (var i = 0; i < itemLen; i++) {
                itemText = elemChildren(oItems[i])[0].innerText;
                if (itemText === content) {
                    alert('已存在该项目');
                    return;
                }
            }
        }
        if (isEdit) {
            var oItem = elemChildren(oItems[curIdx])[0];
            oItem.innerText = content;
            addItem.innerText = '增加项目';
        } else {
            var oLi = document.createElement('li'); //创建内容
            oLi.className = 'item';
            oLi.innerHTML = itemTpl(content);
            oList.appendChild(oLi);
        }
        // inputArea.style.display = 'none';
        // itemContent.value = '';
        // inputShow = false;
        showInput('close');
        restoreStatus();
    });

    addEvent(oList, 'click', function (e) {
        // console.log(1);
        var e = e || window.event,
            tar = e.target || e.srcElement,
            className = tar.className,
            oParent = elemParent(tar, 2),
            oItems = document.getElementsByClassName('item');

        if (className === 'edit-btn fa fa-edit') {

            var itemLen = oItems.length,
                tarIdx = Array.prototype.indexOf.call(oItems, oParent),
                item;

            // inputArea.style.display = 'block';
            // inputShow = true;
            showInput('open');

            for (var i = 0; i < itemLen; i++) {
                item = oItems[i];
                item.className = 'item';
            }
            curIdx = tarIdx;
            oParent.className += ' active';
            addItem.innerText = '编辑第' + (curIdx + 1) + '项';
            isEdit = true;
        } else if (className === 'remove-btn fa fa-times') {
            oParent.remove();
            restoreStatus();
        }
    });

    function showInput(action){
        if(action === 'close'){
            inputArea.style.display = 'none';
            inputShow = false;
        }else if(action === 'open'){
            inputArea.style.display = 'block';
            inputShow = true;
        }
    }
    function restoreStatus(){
        isEdit = false;
        curIdx = null;
        itemContent.value = '';
        addItem.innerText = '增加项目'
    }
    function itemTpl(text) {
        return (
            '<p class="item-content">' + text + '</p>' +
            '<div class="btn-group">' +
            '<a href="javascript:;" class="edit-btn fa fa-edit"></a>' +
            '<a href="javascript:;" class="remove-btn fa fa-times"></a>' +
            '</div>'
        )
    }
})();