今天给大家带来的事一个简单的百度的历史搜索框，大家在搜索东西的时候，百度会自动给你显示你最近搜索过的一些东西，那这个拿js怎么做呢？
我们一起来学习吧
这是一个HTML页面：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <link rel="shortcut icon" type="images/x-icon" href="favicon.ico"> 6 <title>百度一下，你就知道</title> 7 <link rel="stylesheet" type="text/css" href="css/index.css"/> 8 </head> 9 <body> 10 <header> 11 <div class="hea_left"> 12 <a href="#">太原：</a> 13 <a href="#"><img src="img/a1.png"/ class="weather"> 7℃</a> 14 <a href="#"><span class="gr">轻度</span></a> 15 <a href="#">105 |</a> 16 <a href="#" class="a1">换肤</a> 17 <a href="#" class="a1">消息提示</a> 18 <a href="#" class="a1">显示频道</a> 19 </div> 20 <div class="hea_rig"> 21 <a href="#" class="a2">新闻</a> 22 <a href="#" class="a2">hao 123</a> 23 <a href="#" class="a2">地图</a> 24 <a href="#" class="a2">视频</a> 25 <a href="#" class="a2">贴吧</a> 26 <a href="#" class="a2">学术</a> 27 <a href="#" class="a2">登陆</a> 28 <a href="#" class="a2">设置</a> 29 <a href="#" class="a3">更多产品</a> 30 </div> 31 </header> 32 <div id="logo"> 33 <img src="img/superlogo.png"/> 34 </div> 35 <div class="box"> 36 <input type="text" name="" id="inp" value=""/> 37 <div class="xj"></div> 38 <button id="but" onclick="onclickBut()">百度一下</button> 39 <ul> 40 <li>中共十九届二中全会公报公布</li> 41 <li>特朗普就任一周年 美国联邦政府正式“关门”</li> 42 <li>医生拄着拐杖做手术：病人多医生少，能做就做</li> 43 </ul> 44 </div> 45 <div class="footer"> 46 <a href="" class="foot_a">设为首页</a> 47 <span class="foot_text">@2018 Baidu</span> 48 <a href="" class="foot_a">使用百度前必读</a> 49 <a href="" class="foot_a">意见反馈</a> 50 <span class="foot_text">京ICP证030173号</span> 51 <img src="img/copy_rignt_24.png"/> 52 <br /> 53 <img src="img/icon-police.png" class="beian"/><span class="foot_text">京公网安备11000002000001号</span> 54 </div> 55 <script src="js/index.js" type="text/javascript" charset="utf-8"></script> 56 </body> 57 </html>
这是一个Css页面：
1 *{padding: 0;margin: 0;} 2 body,html{width: 100%;height: 100%;background: url(../img/12.jpg) no-repeat;background-size:100% 100%; overflow: hidden;} 3 a{text-decoration: none;color: #fff;} 4 header{width: 100%;height: 32px;background-color: rgba(15,25,50,.3);line-height: 32px;padding-left:10px;font-size: 14px;} 5 .hea_left{float: left;} 6 .hea_rig{float: right;} 7 .gr{color: #badc00;font-weight: bold;} 8 .a1{margin-left: 10px;text-decoration: underline;font-size: 12px;} 9 .a2{margin-right: 20px;text-decoration: underline;font-size: 14px;font-weight: bold;} 10 .a3{display: block;float: right;width: 100px;height: 32px;background: #398bfb;text-align: center;line-height: 32px;} 11 #logo{width: 350px;height: 148px;margin: 6% auto;margin-bottom:2%;} 12 #logo img{cursor: pointer;width: 100%;height: 100%;} 13 .box{width: 660px;height: 300px;margin: 0 auto;position: relative; } 14 .xj{cursor: pointer;width: 24px;height: 22px;position: absolute;right:140px;top: 10px;background: url(../img/pir.png);background-size: 100% 100%;} 15 .xj:hover{background: url(../img/xj.png);background-size: 100% 100%;} 16 #inp{box-sizing: border-box;width: 536px;height: 45px;border: none;text-indent: 1em;} 17 #but{width: 120px;height: 45px;background: url(../img/an_bg.jpg) no-repeat;background-size: 100% 100%;border: none;margin-left:-4px;margin-top:-4px ;cursor:pointer;} 18 #but:focus{background: url(../img/an1_bg.jpg) no-repeat;background-size: 100% 100%;} 19 ul{width: 536px;background: #fff;display: none;} 20 li{list-style: none;line-height: 40px;text-indent: 1em;} 21 li:hover{background: #eee;cursor: pointer;} 22 .footer{width:100%;text-align: center;} 23 .foot_a{margin-right: 4px;text-decoration: underline;font-size: 12px;} 24 .foot_text{color: #fff;font-size: 12px;} 25 .beian{display: inline-block;margin-right: 6px;vertical-align: middle;}
最后就是js的代码了 ，方法有很多哦
1 //方法1 2 var but = document.getElementById("but"); //获取button百度按钮框 3 var arr = document.getElementsByTagName('li'); //获取要显示的li 4 var inp = document.getElementById("inp"); //获要输入的内容的input 5 var ul = document.getElementsByTagName('ul')[0]; //获取ul 6 function onclickBut(){ // 7 for (var i=2;i>=0;i--){ 8 if(i==0){ 9 arr[i].innerHTML=inp.value; 10 }else{ 11 arr[i].innerHTML=arr[i-1].innerHTML; 12 } 13 } 14 //将百度作为连接,传入value的内容,并跳入新的页面 15 window.location.href ="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+inp.value; 16 } 17 18 //input和button聚焦和失焦的状态 19 inp.onfocus = but.onfocus = function(){ 20 ul.style.display = 'block'; 21 } 22 inp.onblur = but.onblur = function(){ 23 ul.style.display = 'none'; 24 } 25 //在input框中回车时 26 inp.onkeydown = function(Ent){ 27 if(Ent.keyCode == 13){ 28 onclickBut(); 29 } 30 } 31 //点击输入过的value内容直接在input框显示 32 for(var x of arr){ 33 x.onmousedown = look ; 34 } 35 function look(){ 36 inp.value = this.innerHTML; 37 } 38 39 40 //数组 41 // var a = new Array(); 42 // var but = document.getElementById("but"); 43 // var inp = document.getElementById("inp"); 44 // var lis = document.getElementsByTagName('li'); 45 // 46 // but.onfocus = function(){ 47 // var inps = inp.value; 48 // a.unshift(inps); 49 // a.length = 3; 50 // console.log(a); 51 // for(i=0;i<a.length;i++){ 52 // if(a[i]!=undefined) 53 // lis[i].innerHTML = a[i]; 54 // } 55 // }
我只是简略的写了一些，如果你有更好的方法记得我们一起探讨哦~~~
另外，以上代码如果哪里我bug随时欢迎帮我指正，谢谢