头条前端笔试最后一道题

题目：
这里写图片描述

题目来源：链接

思路：

用时间委托机制优化DOM绑定事件，不用为每个新增的li绑定事件。
注意DOM上删除节点后，也要在数据中同步删除。
模糊匹配用正则对象和字符串的match方法。
onkeyup 属性在用户（在键盘上）释放按键时触发，相对于 onkeyup 事件的事件次序： onkeydown onkeypress onkeyup ， onkey是键盘接受字符后的事件，这点和onkeypress不同。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>头条前端最后一道题</title>
    <style>
        .main-header {
            text-align: center;
        }

        h1 {
            font-size: 100px;
            color: rgba(175, 47, 47, 0.4);
            font-weight: 100;
            margin: 20px;
        }
        .real-app {
            width:600px;
            margin: 0 auto;
            box-shadow: 0 0 5px #666;
        }
        .add-input {
            position: relative;
            margin: 0;
            width: 100%;
            font-size: 24px;
            font-family: inherit;
            font-weight: inherit;
            line-height: 1.4em;
            border: 0;
            outline: none;
            color: inherit;
            padding: 6px;
            border: 1px solid #999;
            box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
            box-sizing: border-box;
            font-smoothing: antialiased;
            padding: 16px 16px 16px 60px;
            border: none;
            box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
        }

     li {
            margin: 4px 0;
            color: rgba(175, 47, 47, 0.8);
            list-style: none;
            padding-left: 18px;
        }
        .close{
            width: 20px;
            height: 20px;
            float:right;
            background: rgba(0,0,0,0.2);
            text-align: center;
            line-height: 20px;
            position: relative;
            bottom: 3px;
            right:4px;
        }
    </style>
</head>

<body>
    <div class="main-header">
        <h1>todos</h1>
    </div>
    <div class="real-app">
        <input type="text" class="add-input" placeholder="请在这里输入">
        <ul id="parent">

        </ul>
    </div>


</body>
<script>
        var arr = [];
        var button = "<div class='close'>X</div>";
        // var button = " X";

        var input = document.getElementsByClassName("add-input")[0];
        var left = input.offsetLeft;
        document.getElementById("parent").addEventListener("click",function(e) {
            // e.target是被点击的元素!,this是在父元素捕获的ul
            // 如果被点击的是li元素
            // console.log("success");
            if(e.target && e.target.nodeName == "DIV") {
                // console.log(this);
                // console.log(e.target);
                // console.log(e.target.parentNode)
                var str = e.target.parentNode.innerHTML.toString();
                var k = str.indexOf("<");
                str = str.substr(0,k);
                // console.log(str);
                e.target.parentNode.parentNode.removeChild(e.target.parentNode);
                arr.pop(str);

                // arr.pop(e.target.parentNode.text)
            }
        });
        //onkeyup 属性在用户（在键盘上）释放按键时触发。
   /*      提示：相对于 onkeyup 事件的事件次序：
            onkeydown onkeypress onkeyup  
            onkey是键盘接受字符后的事件，这点和onkeypress不同
   */       
        input.onkeyup = function(e) {
           var value = this.value;
           console.log(value);
           var ul = document.getElementsByTagName('ul')[0];
           ul.style.left = left + "px";
           ul.style.border = "none";
           ul.innerHTML = "";
           if(value) {
               var reg = new RegExp(value);
               for(var i = 0; i <arr.length; i++ ) {
                   //string类型的match方法
                   if(arr[i].match(reg)) {
                       var li = document.createElement('li');
                       li.innerHTML = arr[i] + button;
                       ul.style.border = "1px solid black";
                       ul.appendChild(li);
                   }
               }

               e = e || window.event;
               if(e.keyCode == 13) {
                   var newLi = document.createElement('li');
                   var newValue = value;
                   newLi.innerHTML = newValue + button;
                   ul.appendChild(newLi);
                   arr.push(newValue);
                   input.value = "";
               }
           }
        //    按照这个方法给每个li添加事件太浪费了，每次新增加回车就要操作一遍，可以利用时间委托机制，即上面的
        //    var close = document.getElementsByClassName("close");
        //    for(var i = 0; i < close.length; i++) {
        //        (function(i){    
        //            close[i].onlick = function(){
        //                this.parentNode.parentNode.removeChild(this.parentNode);
        //            }
        //        })(i);
        //    }
        }
</script>
</html>

头条前端笔试最后一道题

猜你喜欢