TodoList案例

 

一、HTML骨架：

<header>
        <section>
            <form action="javascript:void(0)" id="form">
                <label for="title">ToDoList</label>
                <input type="text" id="title" name="title" placeholder="添加ToDo" autocomplete="off" />
            </form>
        </section>
    </header>
    <section id="sec">
        <h2>正在进行 <span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">
           
        </ol>
        <h2>已经完成 <span id="donecount"></span></h2>
        <ul id="donelist">
        </ul>
    </section>

 

二、写上表现：

body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    background: #CDCDCD;
}
 
header {
    height: 50px;
    background: #333;
    background: rgba(47, 47, 47, 0.98);
}
 
section {
    margin: 0 auto;
}
 
label {
    float: left;
    width: 100px;
    line-height: 50px;
    color: #DDD;
    font-size: 24px;
    cursor: pointer;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
 
header input {
    float: right;
    width: 60%;
    height: 24px;
    margin-top: 12px;
    text-indent: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
    border: none
}
 
input:focus {
    outline-width: 0
}
 
h2 {
    position: relative;
}
 
span {
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    padding: 0 5px;
    height: 20px;
    border-radius: 20px;
    background: #E6E6FA;
    line-height: 22px;
    text-align: center;
    color: #666;
    font-size: 14px;
}
 
ol,
ul {
    padding: 0;
    list-style: none;
}
 
li input {
    position: absolute;
    top: 2px;
    left: 10px;
    width: 22px;
    height: 22px;
    cursor: pointer;
}
 
p {
    margin: 0;
}
 
li p input {
    top: 3px;
    left: 40px;
    width: 70%;
    height: 20px;
    line-height: 14px;
    text-indent: 5px;
    font-size: 14px;
}
 
li {
    height: 32px;
    line-height: 32px;
    background: #fff;
    position: relative;
    margin-bottom: 10px;
    padding: 0 45px;
    border-radius: 3px;
    border-left: 5px solid #629A9C;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
 
ol li {
    cursor: move;
}
 
ul li {
    border-left: 5px solid #999;
    opacity: 0.5;
}
 
li a {
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    width: 14px;
    height: 12px;
    border-radius: 14px;
    border: 6px double #FFF;
    background: #CCC;
    line-height: 14px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}
 
footer {
    color: #666;
    font-size: 14px;
    text-align: center;
}
 
footer a {
    color: #666;
    text-decoration: none;
    color: #999;
}
 
@media screen and (max-device- 620px) {
    section {
        width: 96%;
        padding: 0 2%;
    }
}
 
@media screen and (min- 620px) {
    section {
        width: 600px;
        padding: 0 10px;
    }
}

 

 

三、最后添加行为：

<script>
       //选择元素
        var title_ele = document.getElementById("title");
        var todo_list_ele = document.getElementById("todolist");
        var done_list_ele = document.getElementById("donelist");
        var sec_ele = document.getElementById("sec");
        // 初始化todo_list数据;
        var todo_list = initTodoData();
        function initTodoData(){
            // 1. localstorage 里面没有数据;
            if(localStorage.getItem("todo_data") === null){
                // 返回基础结构;
                return {
                    todo:[],
                    done:[]
                }
            }
            // todo_data 里面存在数据;  把数据转换成对象， 然后把对象返回回去;
            // 特殊情况 :  如果JSON.parse 解析的字符串不符合json规则报错;
            var obj = null;
            try{
                obj = JSON.parse(localStorage.getItem("todo_data"));
            }catch( e ){
                obj = {
                    todo:[],
                    done:[]
                }
            }
            return obj;
        }
 
        // 渲染初始页面结构;
        function renderTodoList( todo_list ){
            // 数据为空不需要渲染;
            if(todo_list.todo.length === 0 && todo_list.done.length === 0){
                return false;
            }
            // 拼接字符串;
            var todo_html = "";
            todo_list.todo.forEach( function( item ){
                todo_html += `
                <li>
                    <input type="checkbox">
                    <p>${item}</p>
                    <a herf="javascrit:void(0)">-</a>
                </li>`
            })
            todo_list_ele.innerHTML = todo_html;
            var done_html = "";
            todo_list.done.forEach( function( item ){
                done_html += `
                <li>
                    <input type="checkbox" checked>
                    <p>${item}</p>
                    <a herf="javascrit:void(0)">-</a>
                </li>`
            })
            done_list_ele.innerHTML = done_html;
        }
        renderTodoList(todo_list);
        // 删除数据;
        function removeLocalData( type , value ){
            todo_list[type].splice( todo_list[type].indexOf(value) , 1);
            localStorage.setItem("todo_data" , JSON.stringify(todo_list));
        }
        // 更新数据;
        function updateLocalData( type , old_value , new_value){
            todo_list[type].splice( todo_list[type].indexOf(old_value) , 1 , new_value);
            localStorage.setItem("todo_data" , JSON.stringify(todo_list));
        }
 
        title_ele.onkeydown = function( evt ){
            var e = evt || event;
            var keyCode = e.which || e.keyCode;
            if( keyCode === 13){
                var value = createTodoElement();
                saveLocalData("todo",value);
            }
        }
        //将数据存入localstorage;
        function saveLocalData( type , value ){
            todo_list[type].unshift(value);
            localStorage.setItem("todo_data" , JSON.stringify(todo_list));
        }
 
        function createTodoElement(){
            var title_value = title_ele.value;
            var todo_li = createEle({
                tag : "li",
                children : [
                    {
                        tag : "input",
                        attributes : {
                            type : "checkbox"
                        }
                    },
                    {
                        tag : "p",
                        content : title_value
                    },
                    {
                        tag : "a",
                        attributes : {
                            href : "javascript:void(0)"
                        },
                        content : "-"
                    }
                ]
            })
            // 插入元素到todolist位置 : 
            todo_list_ele.insertBefore( todo_li , todo_list_ele.childNodes[0] );
            title_ele.value = "";
            return title_value;
        }
 
        function createEle( options ){
            // 1. 创建标签 : 
            var node = document.createElement( options.tag );
            if( options.attributes ){
                // 遍历属性列表 : 
                for(var attr in options.attributes){
                    // 给元素设置属性;
                    node.setAttribute( attr , options.attributes[attr])
                }
            }
            // 3. 给元素添加内容 : 
            if( options.content ){
                node.innerHTML = options.content;
            }
            // 4. 判定是否存在子集元素;
            if( options.children && options.children.length > 0 ){
                for(var i = 0 ; i < options.children.length ; i ++){
                    // 如果存在子集 : 创建子集元素插入父级之中;
                    node.appendChild( createEle( options.children[i] ) );
                }
            }
            return node;
        }
 
        // 事件委托;
        on(todo_list_ele , "change" , "input" , function( e , node ){
            // 判定checkbox 是否选中  node.checked; 选中为true ， 没有选则为false;
            if(node.checked){
                done_list_ele.appendChild(node.parentNode);
                // 删除数据 , 添加数据;
                var value = node.parentNode.children[1].innerHTML;
                removeLocalData( "todo" , value );
                saveLocalData  ( "done" , value );
            }
        });
        // 同理给done_list 绑定事件;
        on(done_list_ele , "change" , "input" , function( e , node ){
            if(!node.checked){
                todo_list_ele.appendChild(node.parentNode);
                var value = node.parentNode.children[1].innerHTML;
                removeLocalData( "done" , value );
                saveLocalData  ( "todo" , value );
            }
        });
        on( sec_ele , "click" , "a" , function( e , node ){
            node.parentNode.remove();
            var type  = node.parentNode.children[0].checked ? "done" : "todo";
            var value = node.parentNode.children[1].innerHTML;
            removeLocalData( type , value);
        });
        on(todo_list_ele , "click" , "p" , function( e , node ){
            if( node.children.length === 1 ){ 
                return false;
            };
            var old_value = node.innerHTML;
            node.innerHTML = "<input class='ipt' value='"+ node.innerHTML +"'>";
            node.children[0].select();
            on( node.children[0], "blur"  , eventHanlder)
            on( node.children[0], "click" , eventHanlder)
            var has_remove_input = false;
            function eventHanlder(){
                if(has_remove_input) return false;
                console.log("todo" , old_value ,  this.value)
                updateLocalData( "todo" , old_value ,  this.value)
                has_remove_input = true
                node.innerHTML = this.value;
                
            }
        });
        
        //事件委托封装
        function on(ele, type, cb_selector, cb) {
            if (arguments.length === 4 && typeof cb_selector === "string") {
                ele.addEventListener(type, function (evt) {
                    var e = evt || event;
                    var target = e.target || e.srcElement;
                    var node = target;
                    var selector_start = cb_selector.substr(0, 1);
                    var selector_type = null;
                    var selector = cb_selector;
                    switch (selector_start) {
                        case ".":
                            selector_type = "className";
                            selector = cb_selector.slice(1);
                            break;
                        case "#":
                            selector_type = "id";
                            selector = cb_selector.slice(1);
                            break;
                        default:
                            selector_type = "nodeName";
                            break;
                    }
                    while (node !== ele) {
                        if (!node) break;
                        if (node[selector_type] === (selector_type === "nodeName" ? selector.toUpperCase() : selector)) {
                            cb( e , node );
                            break;
                        }
                        node = node.parentNode;
                    }
                });
                return false;
            }
            ele.addEventListener(type, cb_selector);
        }
 
    </script>