最近一段時間確實代碼寫的不少,再過幾天就要上項目,又是要加班的節奏啊.
之前一個大神一直說:不要爲了寫代碼而寫代碼,之前一直不懂,但保持着好學的心態,每天兩三點睡覺,然後發覺並沒有什麼用。理解,理解 ,理解比什麼都重要,思路要清晰,其他都是浮雲。
今天朋友讓我寫個模擬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").onkeyup=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.onmouseover=mouseoverHandle; pObj.onmouseout=mouseoutHandle; } function mouseoverHandle(){ this.style.backgroundColor="yellow"; }; function mouseoutHandle(){ this.style.backgroundColor=""; }; }; </script> </body> </html>