欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

今日头条前端面试的笔试题分享

程序员文章站 2022-04-02 07:50:37
题目: 题目来源:链接 思路: 用时间委托机制优化DOM绑定事件,不用为每个新增的li绑定事件。 注意DOM上删除节点后,也要在数据中同步删除。 模糊匹配用正则对象和字符...

题目:

今日头条前端面试的笔试题分享

题目来源:链接

思路:

用时间委托机制优化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>
    <p class="main-header">
        <h1>todos</h1>
    </p>
    <p class="real-app">
        <input type="text" class="add-input" placeholder="请在这里输入">
        <ul id="parent">

        </ul>
    </p>


</body>
<script>
        var arr = [];
        var button = "<p class='close'>X</p>";
        // 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>