實例講解JS如何實現百度搜尋功能-js教程-PHP中文網

首頁

web前端

js教程

實例講解JS如何實現百度搜尋功能

小云云

Feb 02, 2018 am 10:00 AM

javascript 實現百度

本文主要跟大家介紹js實作百度搜尋功能，程式碼分為html部分和css折疊樣式部分，具體實作程式碼大家參考下本文，希望能幫助大家。

今天我們來用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()">
    <p class="box">
      <p class="box_log">
        <p class="box_log_img">
          <img src="img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png"/>
        </p>
      </p>
      <p class="box_text">
        <p 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>
        </p>
      </p>
    </p>
    <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"); //获取所有的li
otext.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中。

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7862

Java教學

1649

CakePHP 教程

1404

Laravel 教程

1300

PHP教程

1242

Related knowledge

2 個月不見，人形機器人 Walker S 會摺衣服了 Apr 03, 2024 am 08:01 AM

機器之能報道編輯：吳昕國內版的人形機器人+大模型組隊，首次完成疊衣服這類複雜柔性材料的操作任務。隨著融合了OpenAI多模態大模型的Figure01揭開神秘面紗,國內同行的相關進展一直備受關注。就在昨天，國內"人形機器人第一股"優必選發布了人形機器人WalkerS深入融合百度文心大模型後的首個Demo，展示了一些有趣的新功能。現在，得到百度文心大模型能力加持的WalkerS是這個樣子的。和Figure01一樣，WalkerS沒有走動，而是站在桌子後面完成一系列任務。它可以聽從人類的命令，折疊衣物

百度Apollo重磅發表全球首個支援L4級自動駕駛的大模型Apollo ADFM Jun 04, 2024 pm 08:01 PM

5月15日，百度Apollo在武漢百度蘿蔔快跑汽車機器人智行谷舉辦ApolloDay2024，全方位展示百度十年深耕自動駕駛的重大進展，基於大模型帶來技術階躍、面向乘客安全全新定義的無人車和全球最大的無人車自動營運網絡，百度已經做到自動駕駛比人類駕駛更安全。得益於此，更安全舒適、綠色低碳的出行方式正從理想成為現實。百度集團副總裁、智慧駕駛事業群組總裁王雲鵬現場表示：「我們做無人車的初衷，是滿足老百姓日益增長的、對美好出行的嚮往，人民群眾的滿意是我們前進的動力。因為安全、所以美好，我們欣喜地看到

百度李彥宏率隊拜訪中國石油，討論油氣產業智慧化 May 07, 2024 pm 06:13 PM

本站5月7日消息，5月6日，百度創辦人、董事長兼執行長李彥宏帶隊在北京拜訪中國石油天然氣集團有限公司（以下簡稱「中國石油」），並與中國石油集團董事長、黨組書記戴厚良舉行會談。雙方就強化合作，推動能源產業與數位化智慧化深度融合進行了深入交流。中國石油將加速推動數位中中國石油建設，加強與百度集團合作，推動能源產業與數位化智慧化的深度融合，為保障國家能源安全做出更大貢獻。李彥宏表示，大模型展現的「智慧湧現」與理解、生成、邏輯、記憶等核心能力，為前沿科技與油氣業務結合開啟了更廣闊的想像空間。一直

百度息壤貝殼取得方法介紹 Mar 28, 2024 am 09:11 AM

在息壤中有不少用戶不知道貝殼在哪裡，怎麼才能獲得，有些玩家轉了幾個小時候都沒有找到，下面小編就帶來了百度息壤貝殼的獲取方法，快來一起看看吧。百度息壤貝殼怎麼獲得1、首先我們需要來到社區，然後來到下圖的這個位置。 2、在這裡選擇目的地，選擇進入188樓。 3.進入188層後，在周圍轉悠會有這個提示，點擊我知道了就行。 4.貝殼的位置可能會有些難找，就在188電梯的後面，有個發光的小點就是貝殼。 5.撿貝殼要用VR把手才能撿，點擊貝殼就可以了。兌換方式1、先點選頁面右上方的「設定」圖標，在設定中選擇「

deepseek網頁版入口 deepseek官網入口 Feb 19, 2025 pm 04:54 PM

DeepSeek 是一款強大的智能搜索與分析工具，提供網頁版和官網兩種訪問方式。網頁版便捷高效，免安裝即可使用；官網則提供全面產品信息、下載資源和支持服務。無論個人還是企業用戶，都可以通過 DeepSeek 輕鬆獲取和分析海量數據，提升工作效率、輔助決策和促進創新。

消息指出三星 Galaxy S24 系列手機國行版「即圈即搜」將支援Google搜尋 Jun 01, 2024 am 09:54 AM

5月31日消息，根據部落客@i冰宇宙今日爆料，三星GalaxyS24系列手機國行版「即圈即搜」將支援Google搜尋。具體上線時間，該部落客並未透露。根據三星先前介紹，三星GalaxyS24系列實裝了眾多高階AI能力，將輸入、翻譯、錄音機、筆記、相機等實用功能AI化，為使用者帶來更方便、更有效率的綜合體驗。與海外版不同的是，三星GalaxyS24系列的AI功能大多由國內廠商提供服務，例如百度等。先前報導，GalaxyAI深度整合百度文心大模型多項能力，可提供端側賦能的通話、翻譯功能，以及借助生成式AI帶來的智能摘

李彥宏稱在當今大模型生態下開源模型會越來越落後 Apr 17, 2024 pm 09:58 PM

在4月16日，CNMO了解到，百度創始人兼CEO李彥宏在Create2024百度AI開發者大會上宣稱，在當今的大模型生態下，開源模型會越來越落後。他解釋說，百度基礎模型文心4.0可根據不同需求，在效果、響應速度和推理成本等方面靈活剪裁，生成適應各種場景的精簡模型，並支持精簡和postpretrain。相較於直接使用開源模型，文心4.0剪裁出的模型在同等尺寸下表現更佳，並在同等效果下成本更低，因此他預測開源模型將會越來越落後。在先前百度財報的電話會上，李彥宏透露，百度智慧雲端第四季營收達84億元，其中

ai工具推薦 Nov 29, 2024 am 11:08 AM

本文介紹了六款受歡迎的 AI 工具，包括抖音豆包、文心一格、騰訊智影、百度飛槳 EasyDL、百度 AI Studio 和訊飛星火認知大模型。這些工具涵蓋不同的功能，如文字創作、圖像生成、影片編輯和 AI 模型開發。選擇合適的 AI 工具需要考慮功能需求、技術水平和成本預算等因素。這些工具為需要 AI 輔助的個人和企業提供了方便且有效率的解決方案。

See all articles

實例講解JS如何實現百度搜尋功能

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題