学习了部分js后，学习着自己用js做了搜索框的历史记录
本次所练习的重点内容是事件中的“聚焦，失焦”，以及在记录中如何获取搜索框内的内容，以及如何将记录控制在有限数量内的持续更新
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>百度搜索</title> <style type="text/css"> *{padding: 0;margin: 0;} div{margin: 150px auto;width: 700px;} img{width: 500px;height: 170px;margin: 0 10%;} .int_1{width: 600px;height: 50px;float: left;} .int_2{width: 95px;height: 54px;float: left;background: #3385FF;color: white;border: none;} ul{margin-left: 0;display: none;float: left;border: 1px solid #3385FF;} ul li{/*background: red;*/ list-style: none;width: 600px;height: 40px;/*border-bottom: 1px solid #3385FF;*/} </style> </head> <body> <div> <img src='img/161530m3sby6sayistscs3.png'/> <input type="text" class="int_1" value="" /> <input type="button" value="百度一下" class="int_2" /> <ul> <li></li> <li></li> <li></li> </ul> </div> <script> var ints=document.querySelector(".int_2"); var lis=document.querySelectorAll("li"); ints.onclick=function(){ for(var i=lis.length-1;i>=0;i--){ if(document.getElementsByClassName("int_1")[0].value!=""){ if(i==0){ lis[0].innerHTML=document.getElementsByClassName("int_1")[0].value; }else{ lis[i].innerHTML=lis[i-1].innerHTML; } } } } var intt=document.getElementsByClassName("int_1")[0]; intt.onfocus=ints.onfocus=function(){ //聚焦 var jj= document.getElementsByTagName("ul")[0]; jj.style.display="block"; } intt.onblur=ints.onblur=function(){ //失焦 var sj= document.getElementsByTagName("ul")[0]; sj.style.display="none"; } </script> </body> </html>
还在持续学习中，希望之后能将此内容可以扩展到更加完善~
欢迎大牛，新人一起学习讨论，赐教~