快捷導(dǎo)航

JS 實(shí)現(xiàn)百度搜索功能

更新時(shí)間：2018年02月01日 11:49:24 作者：侯曉偉

這篇文章給大家介紹了js實(shí)現(xiàn)百度搜索功能，代碼分為html部分和css折疊樣式部分，具體實(shí)現(xiàn)代碼大家參考下本文

今天我們來(lái)用JS實(shí)現(xiàn)百度搜索功能，下面上代碼：

　　　　HTML部分：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!--百度iocn圖標(biāo)-->
    <link rel="shortcut icon"  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框中的小相機(jī)*/
  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{ /*當(dāng)按鈕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{ /*當(dāng)li hover的樣式*/
  background: #F0F0F0;
}
.li1{ /*li中的值縮進(jìn)*/
  text-indent: 4px;
}

JS部分：

var otext = document.getElementById("text"); //獲取input框
ose = document.querySelector("#search"); //通過(guò)類名選擇器 選擇到search框
lis = document.getElementsByClassName("li1"); //獲取所有的li
otext.onkeyup = function(){  //當(dāng)在input框中鍵盤彈起發(fā)生事件
  ose.style.display = otext.value?"block":"none"; /*三目運(yùn)算符,如果otext.value的值部位空,則block。*/
  var osc = document.createElement("script"); /*創(chuàng)建一個(gè)script標(biāo)簽*/
  osc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei";
  /*srcipt的src值引入百度的url,然后將otext文本框中輸入的內(nèi)容連接到url,在后面在運(yùn)行自己的方法*/
  document.body.appendChild(osc);
  /*將創(chuàng)建好的script標(biāo)簽元素放入body中*/
  /*input框中按下回車根據(jù)input的值跳轉(zhuǎn)頁(yè)面*/
  if(event.keyCode==13){
    /*將百度作為連接,傳入input的值,并跳入新的頁(yè)面*/
    window.location.+otext.value
  }
}
var count = 0;
var search = 0;
var arr = ose.children; /*獲取ose下的所有l(wèi)i*/
function houxiaowei(json){
  var jsonLength = 0; /*json長(zhǎng)度的初始值*/
//          console.log(json.s);
  for(var x in json.s){  /*將循環(huán)的次數(shù)變成json的長(zhǎng)度*/
    jsonLength++;
  }
//          console.log(jsonLength);
  for(var i=0;i<lis.length;i++){
    if(jsonLength==0){ /*如果遍歷出的長(zhǎng)度等于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.+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的時(shí)候觸發(fā),并跳到新的連接*/
var btn = document.querySelector("#btn");
cookies = []; 
btn.onclick = function(){
  /*獲取當(dāng)前input的值*/
  var otext = document.getElementById("text").value;
  /*將百度作為連接,傳入input的值,并跳入新的頁(yè)面*/
  if(otext=="" || otext==null){
    window.location.;
  }else{
    window.location.+otext
  }
}
/*加載頁(yè)面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%";
}‘“

　　搜索功能的實(shí)現(xiàn)源于百度的 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei，這個(gè)鏈接,其中”wd”的值為input框中需要搜索的值,它會(huì)返回一個(gè)json對(duì)象。&cb的值是一個(gè)方法或者是函數(shù)，它用來(lái)將json中的值提取出來(lái)放入li中。

總結(jié)

以上所述是小編給大家介紹的JS 實(shí)現(xiàn)百度搜索功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: