首頁 > 開發者 > JavaScript
JS 實現百度搜尋功能，js實現百度搜尋
今天我們來用JS實現百度搜尋功能，下面上代碼：
HTML部分：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <!--百度iocn表徵圖--> <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" rel="external nofollow" type="image/x-icon"/> <title>百度一下,你就知道</title> <link rel="stylesheet" href="css/baidu.css" rel="external nofollow" /> <script src="js/H.js"></script> </head> <body onload="onloads(),randomBack()"> <div class="box"> <div class="box_log"> <div class="box_log_img"> <img src="img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png"/> </div> </div> <div class="box_text"> <div class="box_text_content"> <input type="text" name="text" id="text" value="" autofocus="autofocus"/> <input type="button" name="bdyx" id="btn" value="百度一下" /> <ul id="search"> <li class="li1" id="0" onclick="iptShow(this.id)"></li> <li class="li1" id="1" onclick="iptShow(this.id)"></li> <li class="li1" id="2" onclick="iptShow(this.id)"></li> <li class="li1" id="3" onclick="iptShow(this.id)"></li> <li class="li1" id="4" onclick="iptShow(this.id)"></li> <li class="li1" id="5" onclick="iptShow(this.id)"></li> <li class="li1" id="6" onclick="iptShow(this.id)"></li> <li class="li1" id="7" onclick="iptShow(this.id)"></li> <li class="li1" id="8" onclick="iptShow(this.id)"></li> <li class="li1" id="9" onclick="iptShow(this.id)"></li> </ul> </div> </div> </div> <script type="text/javascript" src="js/index.js" ></script> </body></html>
CSS層疊樣式部分：
body{/*清除瀏覽器內建樣式*/ margin: 0; padding: 0; /*background-repeat: no-repeat;*/ min-width: 1200px;}.box{/*最大的盒子*/ width: 100%; height: 100%; /*background: yellow;*/ /*height: 636px;*/}.box_log{/*log盒子*/ width: 100%; height: 250px; text-align: center;}.box_log_img{ margin:0 auto; width: 300px; height: 150px;}.box_log img{ width: 300px; height: 150px; margin-top: 38px; margin-bottom: 19px;}.box_text{/*text搜尋方塊盒子大小*/ width: 100%; height: 36px;}.box_text_content{ width: 640px; height: 36px; margin: 0 auto;}#text{ /*input框的樣式*/ width: 540px; height: 36px; box-sizing: border-box; margin-top: 3px; text-indent: 4px; outline: none;}.log_img{/*input框中的小相機*/ position: absolute; left: 62%; top: 35.5%;}#btn{ /*按鈕的樣式*/ width: 100px; height: 36px; background: #3385FF; border: 0px; letter-spacing: 1px; color: white; margin-left: -5px; font-size: 15px; box-sizing: border-box; transform: translateY(1.5px); box-sizing: border-box;}#btn:hover{ /*當按鈕hover的樣式*/ cursor: pointer;}#search{ /*搜尋方塊的樣式*/ width: 540px; margin: 0; padding: 0; list-style: none; display: none; border: 1px solid #E3E5E4; }#search li{ /*搜尋方塊li的大小顏色*/ line-height: 36px; background: white;}#search li:hover{ /*當li hover的樣式*/ background: #F0F0F0;}.li1{ /*li中的值縮排*/ text-indent: 4px;}
JS部分：
var otext = document.getElementById("text"); //擷取input框ose = document.querySelector("#search"); //通過類名選取器 選擇到search框lis = document.getElementsByClassName("li1"); //擷取所有的liotext.onkeyup = function(){ //當在input框中鍵盤彈起發生事件 ose.style.display = otext.value?"block":"none"; /*三目運算子,如果otext.value的值部位空,則block。*/ var osc = document.createElement("script"); /*建立一個script標籤*/ osc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei"; /*srcipt的src值引入百度的url,然後將otext文字框中輸入的內容串連到url,在後面在運行自己的方法*/ document.body.appendChild(osc); /*將建立好的script標籤元素放入body中*/ /*input框中按下斷行符號根據input的值跳轉頁面*/ if(event.keyCode==13){ /*將百度作為串連,傳入input的值,並跳入新的頁面*/ window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value }}var count = 0;var search = 0;var arr = ose.children; /*擷取ose下的所有li*/function houxiaowei(json){ var jsonLength = 0; /*json長度的初始值*/// console.log(json.s); for(var x in json.s){ /*將迴圈的次數變成json的長度*/ jsonLength++; }// console.log(jsonLength); for(var i=0;i<lis.length;i++){ if(jsonLength==0){ /*如果遍曆出的長度等於0,li的值為空白*/ arr[i].innerHTML = null; }else{ if(json.s[i]!=null){/*如果json[i]的值不等於空,則將它的值放入li中*/ arr[i].innerHTML = json.s[i]; } } } if(count==lis.length-1){ count=0; search=0; } count++; search++;}/*單擊li中的值顯示在input框中*/function iptShow(thisId){ otext.value = arr[thisId].innerHTML; window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value}otext.onclick = function(e){ ose.style.display = "block"; var e = event || window.event; e.stopPropagation(); //阻止冒泡事件,除了IE8及以下不相容,其他瀏覽器都相容 e.cancelBubble=true; //阻止冒泡事件,IE8及以下相容// alert(e);}/*單擊body中的任意地方隱藏li*/document.body.onclick = function(){ ose.style.display = "none";}/*單擊百度btn的時候觸發,並跳到新的串連*/var btn = document.querySelector("#btn");cookies = []; btn.onclick = function(){ /*擷取當前input的值*/ var otext = document.getElementById("text").value; /*將百度作為串連,傳入input的值,並跳入新的頁面*/ if(otext=="" || otext==null){ window.location.href = "http://127.0.0.1:8020/%E7%99%BE%E5%BA%A6/%E7%99%BE%E5%BA%A6%E9%A6%96%E9%A1%B5.html?__hbt=1516599867084"; }else{ window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext }}/*載入頁面input為空白*/function onloads(){ var s = otext.value = null; $myId("text").focus();}function randomBack(){ var randomBk = parseInt(Math.random()*545); document.body.style.background = "url(https://ss3.bdstatic.com/lPoZeXSm1A5BphGlnYG/skin/"+randomBk+".jpg?2)"; document.body.style.backgroundSize = "100%";}‘“
搜尋功能的實現源於百度的 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei，這個連結,其中”wd”的值為input框中需要搜尋的值,它會返回一個json對象。&cb的值是一個方法或者是函數，它用來將json中的值提取出來放入li中。
總結
以上所述是小編給大家介紹的JS 實現百度搜尋功能，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
