JS 实现百度搜索功能

2024-05-06 16:42:12

字体：大中小

来源：转载

供稿：网友

今天我们来用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 实现百度搜索功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对VeVb武林网网站的支持！

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：使用JS模拟锚点跳转的实例

下一篇：深入剖析Express cookie-parser中间件实现示例