当前位置：Gxlcms > JavaScript > 通过JS技术如何实现百度搜索

通过JS技术如何实现百度搜索

时间：2021-07-01 10:21:17 帮助过：8人阅读

这篇文章给大家介绍了js实现百度搜索功能，代码分为html部分和css折叠样式部分，具体实现代码大家参考下本文

今天我们来用JS实现百度搜索功能，下面上代码：

HTML部分：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <!--百度iocn图标-->
  6.     <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" rel="external nofollow" type="image/x-icon"/>
  7.     <title>百度一下,你就知道</title>
  8.     <link rel="stylesheet" href="css/baidu.css" rel="external nofollow" />
  9.     <script src="js/H.js"></script>
  10.   </head>
  11.   <body onload="onloads(),randomBack()">
  12.     <p class="box">
  13.       <p class="box_log">
  14.         <p class="box_log_img">
  15.           <img src="img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png"/>
  16.         </p>
  17.       </p>
  18.       <p class="box_text">
  19.         <p class="box_text_content">
  20.           <input type="text" name="text" id="text" value="" autofocus="autofocus"/>
  21.           <input type="button" name="bdyx" id="btn" value="百度一下" />
  22.           <ul id="search">
  23.             <li class="li1" id="0" onclick="iptShow(this.id)"></li>
  24.             <li class="li1" id="1" onclick="iptShow(this.id)"></li>
  25.             <li class="li1" id="2" onclick="iptShow(this.id)"></li>
  26.             <li class="li1" id="3" onclick="iptShow(this.id)"></li>
  27.             <li class="li1" id="4" onclick="iptShow(this.id)"></li>
  28.             <li class="li1" id="5" onclick="iptShow(this.id)"></li>
  29.             <li class="li1" id="6" onclick="iptShow(this.id)"></li>
  30.             <li class="li1" id="7" onclick="iptShow(this.id)"></li>
  31.             <li class="li1" id="8" onclick="iptShow(this.id)"></li>
  32.             <li class="li1" id="9" onclick="iptShow(this.id)"></li>
  33.           </ul>
  34.         </p>
  35.       </p>
  36.     </p>
  37.     <script type="text/javascript" src="js/index.js" ></script>
  38.   </body>
  39. </html>

CSS层叠样式部分：

  1. body{/*清除浏览器自带样式*/
  2.   margin: 0;
  3.   padding: 0;
  4.   /*background-repeat: no-repeat;*/
  5.   min-width: 1200px;
  6. }
  7. .box{/*最大的盒子*/
  8.   width: 100%;
  9.   height: 100%;
  10.   /*background: yellow;*/
  11.   /*height: 636px;*/
  12. }
  13. .box_log{/*log盒子*/
  14.   width: 100%;
  15.   height: 250px;
  16.   text-align: center;
  17. }
  18. .box_log_img{
  19.   margin:0 auto;
  20.   width: 300px;
  21.   height: 150px;
  22. }
  23. .box_log img{
  24.   width: 300px;
  25.   height: 150px;
  26.   margin-top: 38px;
  27.   margin-bottom: 19px;
  28. }
  29. .box_text{/*text搜索框盒子大小*/
  30.   width: 100%;
  31.   height: 36px;
  32. }
  33. .box_text_content{
  34.   width: 640px;
  35.   height: 36px;
  36.   margin: 0 auto;
  37. }
  38. #text{ /*input框的样式*/
  39.   width: 540px;
  40.   height: 36px;
  41.   box-sizing: border-box;
  42.   margin-top: 3px;
  43.   text-indent: 4px;
  44.   outline: none;
  45. }
  46. .log_img{/*input框中的小相机*/
  47.   position: absolute;
  48.   left: 62%;
  49.   top: 35.5%;
  50. }
  51. #btn{ /*按钮的样式*/
  52.   width: 100px;
  53.   height: 36px;
  54.   background: #3385FF;
  55.   border: 0px;
  56.   letter-spacing: 1px;
  57.   color: white;
  58.   margin-left: -5px;
  59.   font-size: 15px;
  60.   box-sizing: border-box;
  61.   transform: translateY(1.5px);
  62.   box-sizing: border-box;
  63. }
  64. #btn:hover{ /*当按钮hover的样式*/
  65.   cursor: pointer;
  66. }
  67. #search{  /*搜索框的样式*/
  68.   width: 540px;
  69.   margin: 0;
  70.   padding: 0;
  71.   list-style: none;
  72.   display: none;
  73.   border: 1px solid #E3E5E4; 
  74. }
  75. #search li{ /*搜索框li的大小颜色*/
  76.   line-height: 36px;
  77.   background: white;
  78. }
  79. #search li:hover{ /*当li hover的样式*/
  80.   background: #F0F0F0;
  81. }
  82. .li1{ /*li中的值缩进*/
  83.   text-indent: 4px;
  84. }

JS部分：

  1. var otext = document.getElementById("text"); //获取input框
  2. ose = document.querySelector("#search"); //通过类名选择器 选择到search框
  3. lis = document.getElementsByClassName("li1"); //获取所有的li
  4. otext.onkeyup = function(){  //当在input框中键盘弹起发生事件
  5.   ose.style.display = otext.value?"block":"none"; /*三目运算符,如果otext.value的值部位空,则block。*/
  6.   var osc = document.createElement("script"); /*创建一个script标签*/
  7.   osc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei";
  8.   /*srcipt的src值引入百度的url,然后将otext文本框中输入的内容连接到url,在后面在运行自己的方法*/
  9.   document.body.appendChild(osc);
  10.   /*将创建好的script标签元素放入body中*/
  11.   /*input框中按下回车根据input的值跳转页面*/
  12.   if(event.keyCode==13){
  13.     /*将百度作为连接,传入input的值,并跳入新的页面*/
  14.     window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value
  15.   }
  16. }
  17. var count = 0;
  18. var search = 0;
  19. var arr = ose.children; /*获取ose下的所有li*/
  20. function houxiaowei(json){
  21.   var jsonLength = 0; /*json长度的初始值*/
  22. //          console.log(json.s);
  23.   for(var x in json.s){  /*将循环的次数变成json的长度*/
  24.     jsonLength++;
  25.   }
  26. //          console.log(jsonLength);
  27.   for(var i=0;i<lis.length;i++){
  28.     if(jsonLength==0){ /*如果遍历出的长度等于0,li的值为空*/
  29.       arr[i].innerHTML = null;  
  30.     }else{
  31.       if(json.s[i]!=null){/*如果json[i]的值不等于空,则将它的值放入li中*/
  32.         arr[i].innerHTML = json.s[i];
  33.       }
  34.     }
  35.   }
  36.   if(count==lis.length-1){
  37.     count=0;
  38.     search=0;
  39.   }
  40.   count++;
  41.   search++;
  42. }
  43. /*单击li中的值显示在input框中*/
  44. function iptShow(thisId){
  45.   otext.value = arr[thisId].innerHTML;
  46.   window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value
  47. }
  48. otext.onclick = function(e){
  49.   ose.style.display = "block";
  50.   var e = event || window.event;
  51.   e.stopPropagation();  //阻止冒泡事件,除了IE8及以下不兼容,其他浏览器都兼容
  52.   e.cancelBubble=true; //阻止冒泡事件,IE8及以下兼容
  53. //        alert(e);
  54. }
  55. /*单击body中的任意地方隐藏li*/
  56. document.body.onclick = function(){
  57.   ose.style.display = "none";
  58. }
  59. /*单击百度btn的时候触发,并跳到新的连接*/
  60. var btn = document.querySelector("#btn");
  61. cookies = []; 
  62. btn.onclick = function(){
  63.   /*获取当前input的值*/
  64.   var otext = document.getElementById("text").value;
  65.   /*将百度作为连接,传入input的值,并跳入新的页面*/
  66.   if(otext=="" || otext==null){
  67.     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";
  68.   }else{
  69.     window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext
  70.   }
  71. }
  72. /*加载页面input为空*/
  73. function onloads(){
  74.   var s = otext.value = null;
  75.   $myId("text").focus();
  76. }
  77. function randomBack(){
  78.   var randomBk = parseInt(Math.random()*545);
  79.   document.body.style.background = "url(https://ss3.bdstatic.com/lPoZeXSm1A5BphGlnYG/skin/"+randomBk+".jpg?2)";
  80.   document.body.style.backgroundSize = "100%";
  81. }‘“

　　搜索功能的实现源于百度的 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei，这个链接,其中”wd”的值为input框中需要搜索的值,它会返回一个json对象。&cb的值是一个方法或者是函数，它用来将json中的值提取出来放入li中。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JS中Number类型（详细教程）

在vue中预加载watch用法

在Angular如何使用浏览器插件Batarang

以上就是通过JS技术如何实现百度搜索的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！