今日头条前端面试的笔试题分享
程序员文章站
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>
上一篇: 第三代Apple Watch在中国的电话功能要推迟了
下一篇: HTML及CSS导航栏代码实现教程