标签：30px back innerHTML 列表 oAddInput var 土豆 document 替换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>TODOList</title> <style type="text/css"> body{ margin: 0; background-color: #f5f5f5; } h1{ /* margin: 30px 0 0 0; */ color: #ff5550; text-align: center; font-size: 60px; } #back{ width: 300px; margin: 0 auto; border: 1px solid #333; box-shadow: 0px 0px 3px #999; background-color: #fff; } #back input{ width: 100%; box-sizing: border-box; line-height: 30px; border: none; border-bottom: 1px solid #000; padding: 5px 15px; font-size: 18px; } #list_back .single{ position: relative; border-bottom: 1px solid #000; } #list_back .single p{ width: 100%; height: 30px; margin: 0; line-height: 30px; padding: 5px 15px; } #list_back .single span{ position: absolute; right: 0; top: 0; width: 30px; text-align: center; line-height: 40px; font-size: 18px; color: #000; cursor: pointer; } </style> </head> <body> <h1>todos</h1> <div id="back"> <input id="addInput" type="text" name=""> <div id="list_back"></div> </div> <script type="text/javascript"> var oAddInput = document.getElementById('addInput'); var oList_back = document.getElementById('list_back'); var all = document.getElementsByClassName('single'); oAddInput.onkeyup = function(){ // alert(event.keyCode);//13 // alert(event.code);//Enter //表示如果点击回车键 if(event.keyCode == '13'){ // alert('add'); var oDiv = document.createElement('div'); var oSpan = document.createElement('span'); var oP = document.createElement('p'); oDiv.appendChild(oP); oDiv.appendChild(oSpan); oP.innerHTML = oAddInput.value; // alert(oAddInput.value); //×就表示一个X号 oSpan.innerHTML = '×'; oDiv.className = 'single'; oList_back.appendChild(oDiv); oAddInput.value = '';//清空输入框 oSpan.onclick= function(){ oList_back.removeChild(this.parentNode);//绑定删除方法 }; } }; 模糊查询 function select(){ oAddInput.addEventListener('keyup', function(e){//监听键盘抬起事件（所有键盘按钮） // console.log(e.target.value); var str = e.target.value; var reg = new RegExp('(' + str + ')', 'g');//匹配到的文字变红色，准备工作 for( var i = 0; i<all.length; i++ ){ var one = all[i].getElementsByTagName('p')[0];//因为getElementByTagName用[0]表示取其中的第一个 var newStr = one.innerText.replace(reg, '<font color=red>$1</font>');//换-->红色，用innerText防止用innerHTML将标签也读取出来出错。 if( one.innerText.indexOf(str) == -1 ){//也选用innerHTML all[i].style.display = 'none';//匹配不到的掩藏 }else{ one.innerHTML = newStr;//匹配到的变红 } } if(str == ''){ for( var i = 0; i<all.length; i++ ){ all[i].style.display = 'block';//输入框空时全部显示 } } }); } select(); //函数解析完就运行 </script> </body> </html>
标签：30px,back,innerHTML,列表,oAddInput,var,土豆,document,替换 来源： https://www.cnblogs.com/huanxiongs02/p/14672250.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。