最近一段时间确实代码写的不少,再过几天就要上项目,又是要加班的节奏啊.
之前一个大神一直说:不要为了写代码而写代码,之前一直不懂,但保持着好学的心态,每天两三点睡觉,然后发觉并没有什么用。理解,理解 ,理解比什么都重要,思路要清晰,其他都是浮云。
今天朋友让我写个模拟keywords搜索的代码,竟然写了快一个小时,深深感觉到思路的重要性,为了明天,继续向着敲代码前进!
代码如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #box { width: 450px; margin: 200px auto; } #txt{ width: 350px; } #pop { width: 350px; border: 1px solid red; } #pop ul { margin: 10px; padding: 0px; width: 200px; list-style-type: none; } #pop ul li { } .hp{ margin-top: 5px; font-family: "微软雅黑"; cursor: pointer; } </style> </head> <body> <div id="box"> <input type="text" id="txt" value=""> <input type="button" value="搜索" id="btn"> </div> <script src="common.js"></script> <script> var keyWords=["小杨才是最纯洁的","小杨才是最帅的","小段是最猥琐的","小超是最龌龊的","苹果好吃","苹果此次召回还是没有中国"]; //先建立鼠标抬起事件 my$("txt").οnkeyup=function() { if(my$("dv")){ my$("box").removeChild(divObj); }; //存入输入的内容 var arr = []; var text = this.value;//文本框的内容 //判断输入的内容有没有keyword中存在的 for (var i = 0; i < keyWords.length; i++) { //判断输入的内容里有没有keywords里面的,并且等于0即索引刚开始有 if (keyWords[i].indexOf(text) == 0) { arr.push(keyWords[i]); } }; if(this.value.length==0||arr.length==0){ //判断需要多理解 if(my$("dv")){ my$("box").removeChild(divObj); } return; } var divObj = document.createElement("div"); divObj.id="dv"; divObj.style.width = "350px"; // divObj.style.height = "200px"; my$("box").appendChild(divObj); divObj.style.border = "1px solid red"; //取出arr 装进div中 遍历 for(var i =0;i<arr.length;i++){ //创建p.放到div中 var pObj=document.createElement("p"); divObj.appendChild(pObj); pObj.innerHTML=arr[i]; pObj.className="hp"; pObj.οnmοuseοver=mouseoverHandle; pObj.οnmοuseοut=mouseoutHandle; } function mouseoverHandle(){ this.style.backgroundColor="yellow"; }; function mouseoutHandle(){ this.style.backgroundColor=""; }; }; </script> </body> </html>