JS模拟todos

107 阅读 0 评论 71 点赞

我是靠谱客的博主积极大碗，最近开发中收集的这篇文章主要介绍JS模拟todos，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

用js模拟写了一个todos.

    <div class="box">
        <h1>Todos</h1>
        <input type="text" placeholder="What needs to done?">
        <ul></ul>
    </div>

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
        line-height: 1.4em;
        background: #eeeeee;
        color: #333333;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
        width: 520px;
        margin: 0 auto;
    }

    .box {
        background: #fff;
        padding: 20px;
        margin-bottom: 40px;
        text-align: center;
        border-radius: 0 0 5px 5px;
        box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
        padding: 20px;
    }

    h1 {
        margin: 26px 0;
    }

    input {
        width: 466px;
        font-size: 24px;
        font-family: inherit;
        line-height: 1.4em;
        outline: none;
        padding: 6px;
        border: 1px solid #999999;
        vertical-align: middle;
    }

    button {
        width: 66px;
        line-height: 1.4em;
        height: 47px;
    }

    ul {
        width: 100%;
        padding: 20px;
        text-align: left;
    }

    li {
        width: 100%;
        border-top: 1px solid #ccc;
        padding: 20px 0 0 0;
        list-style: none;
        font-size: 24px;
        margin: 20px 0 0 0;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    li:nth-child(1) {
        border-top: 1px solid transparent;

    }

    span {
        float: right;
        width: 26px;
        height: 26px;
        font-size: 18px;
        text-align: center;
        line-height: 26px;
        background-color: chartreuse;
        color: white;
        border-radius: 50%;
    }

    span:hover {
        background-color: red;
    }

       //1.获取input
        var ipt = document.getElementsByTagName('input')[0];
        var ul = document.getElementsByTagName('ul')[0];
        //2.键盘事件
        document.onkeydown = function (e) {
            console.dir(e)//事件对象
            if(e.keyCode == 13) {
                //2.1 创建容器 li span lable
                var value = ipt.value;
                // value = value.trim()
                if (value !== '') {
                    var li = document.createElement('li');
                    var span = document.createElement('span');
                    var label = document.createElement('label');
                    //2.2 往标签里面加内容
                    ul.appendChild(li);
                    li.appendChild(span);
                    li.appendChild(label);
                    span.innerHTML = 'x';
                    label.innerHTML = value;
                }

                ipt.value = '';

                //3.删除线
                label.onclick = function () {
                    if (label.style.textDecoration == '') {
                        label.style.textDecoration = 'line-through';
                    }
                    else {
                        label.style.textDecoration = '';
                    }
                }

                //4.删除元素
                span.onclick = function () {
                    ul.removeChild(this.parentElement);
                }
            }
        }