【JavaScript_DOM 百度搜索框】
阿新 • • 發佈：2018-01-22
aid border 哪裏 tps onkeydown otto super arr utf
今天給大家帶來的事一個簡單的百度的歷史搜索框，大家在搜索東西的時候，百度會自動給你顯示你最近搜索過的一些東西，那這個拿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隨時歡迎幫我指正，謝謝
【JavaScript_DOM 百度搜索框】