怎麼使用JS實作百度搜尋框-js教程-PHP中文網

首頁

web前端

js教程

怎麼使用JS實作百度搜尋框

php中世界最好的语言

May 23, 2018 pm 03:34 PM

javascript 搜尋百度

這次帶給大家怎樣使用JS實作百度搜尋框，使用JS實作百度搜尋框的注意事項有哪些，下面就是實戰案例，一起來看一下。

效果:

　　1.當進入介面時，自動呼叫方法，取得目前的時間，並且即時更新時間。

　　2.點選頁面頭部的換膚，自動更換背景圖片

　　3.滑鼠點選搜尋框的時候自動顯示使用者上次搜尋的內容，

　　4 .當滑鼠放在使用者上次搜尋的內容的時候搜尋框的內容變成滑鼠懸浮的內容上

　　5.在搜尋框中按回車的時候自動輸入為上次輸入的內容中，若本次內容和上次內容相同則不顯示

　　6.點擊百度一下按鈕自動錄入搜尋框中的內容為上次搜尋的內容

介面：

介面html程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>百度一下，你就知道</title>
 <link rel="shortcut icon" type="imges/x-icon" href="img/favicon.ico">　　<!-- 页面标题的图标 -->
 <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body onload="dates()" id="bo">　　<!-- 当页面加载时调用函数 -->
 <p class="nav">
  <ul class="left">
   <li>时间：</li>
   <li id="sj"></li>
   <li>|</li>
   <li><a id="bg">换肤</a></li>
   <li><a>消息</a></li>
  </ul>
  <ul class="right">
   <li><a href="#">新闻</a></li>
   <li><a href="#">hao123</a></li>
   <li><a href="#">地图</a></li>
   <li><a href="#">视频</a></li>
   <li><a href="#">贴吧</a></li>
   <li><a href="#">学术</a></li>
   <li><a href="#">登陆</a></li>
   <li><a href="#">注册</a></li>
  </ul>
 </p>
 <img src="img/logo.png" alt="" id="logo">
 <p class="baidu_box">
  <input type="text" name="" value=" " id="seek">
  <img src="img/xj.png" alt="" class="icon">
  <p id="baidu">百度一下</p>
  <ul>
   <p>十九大后 习大大反腐不歇脚</p>
   <p>张一山杨紫互怼</p>
   <p>土耳其客机被吊起</p>
  </ul>
 </p>
 <ul class="buttom">
  <li><a href="#">把百度设为首页</a></li>
  <li><a href="#">关于百度</a></li>
  <li><a href="#">About Baidu</a></li>
  <li><a href="#">百度推广</a></li>
 </ul>
 <script type="text/javascript" src=&#39;js/index.js&#39;></script>
 <script>
  setInterval('dates()',1000)　　//定时器，每1秒调用下函数
 </script>
</body>
</html>

登入後複製

css程式碼：

*{margin: 0;padding: 0;}
body,html{width: 100%;height: 636px;background: url('../img/bj2.jpg') no-repeat;background-size:100% 100% }
.nav{width: 100%;height: 32px;background:rgba(0,0,0,0.3);padding-right:20px;padding-left:20px;box-sizing: border-box }
.nav .left{list-style: none;float: left}
.nav .left li{color:white;line-height: 32px;margin-right: 12px;font-size: 13px;float: left;}
.nav .left li a{color:white;}
.nav .left li a:hover{cursor: pointer}
.nav .right{list-style: none;float: right;}
.nav .right li a{color:white;line-height: 32px;margin-left: 12px;font-size: 13px;opacity:1;}
.nav .right li{float: left;}
#logo{margin: 0px auto;display: block;}
.baidu_box{width: 646px;height: 44px;margin:0 auto;position: relative;margin-top: 20px; }
.baidu_box #seek{height: 40px;width: 538px;float: left;text-indent: 0.6em;font-size: 16px;}
.baidu_box #baidu{width: 104px;height: 44px;float: left;line-height: 44px;font-size:16px;text-align: center;background: url('../img/an_bg.jpg') no-repeat;background-size: 100% 100%;}
.baidu_box #baidu:hover{cursor: pointer}
.baidu_box .icon{position: absolute;top: 12px;left: 490px;}
.baidu_box .icon:hover{cursor: pointer}
.baidu_box ul{width: 541px;float: left;display: none;}
.baidu_box ul p{width: 542px;line-height: 40px;list-style: none;display: none;text-indent: 0.6em;background: white}
.baidu_box ul p:hover{cursor: pointer;background: url('../img/an_bg.jpg') no-repeat;background-size: 100% 100%;}
.buttom{margin: 0 auto;width: 500px;height: 40px;margin-top:210px;}
.buttom li {list-style: none;float: left;margin-left: 20px;}
.buttom li a {line-height: 40px;color: #525252;}

登入後複製

js程式碼：

//百度搜索框
var baidu = document.getElementById('baidu'); //获取百度按钮名字
var seekArray = new Array (); //创建新数组;用来存放用户上一次搜索的问题
var seek = document.getElementById('seek'); //获取百度搜索框
var p = document.getElementsByTagName('p'); //获取下拉标签
baidu.onclick = baiDu;//给百度按钮创建onclick事件
function baiDu(){
 var seeked = seek.value;  //获取用户在搜索框中搜索的内容
 if((seeked != seekArray[0]) && (seeked != seekArray[1])){ //判断数组内不能出现重复的值，若重复则不能添加到数组中
  seekArray.unshift(seeked);  //将用户添加的内容放入到新创建的内数组中
 }
 seekArray.length = 3;   //将数组的长度定死为3 ;即显示搜索框显示的内容就是为3
 for(var x=0;x<seekArray.length;x++){ //将数组中的东西放入到我们的搜索框下菜单中
  if((seekArray[x] != undefined)){  //判断用户上次搜索的东西，假如为空就不显示
   p[x].innerHTML = seekArray[x];
  }
 }
}
//搜索框获焦/失焦的状态
seek.onfocus = function(){
 for(var x of p){
  x.style.display = 'block';
 }
 p[0].parentNode.style.display = 'block'; //
}
seek.onblur = function(){
 p[0].parentNode.style.display = 'none';
 for(var x of p){
  x.style.display = 'none';
 }
}
seek.onkeydown = function(Ent){
 // console.log(baiDu);
 if(Ent.keyCode == 13){  //当在input框中敲回车的时候
  baiDu();    //触发baiDu()
 }
}
//点击用户搜索过的新闻搜索框直接显示
for(var x of p){
 x.onmouseover = look ; //遍历所有的li并且给每个li添加鼠标悬浮事件
}
function look(){
 seek.value = this.innerHTML;
}
//获取当前时间
function dates(){
 var now = document.getElementById('sj');
 var time = new Date;
 var hour = time.getHours();
 var mins = time.getMinutes();
 if(parseInt(mins)<10){
  mins = '0'+mins;
 }
 now.innerHTML = hour +':'+mins;
}
//点击换背景
var bg = document.getElementById('bg');//获取id为dg的标签
bg.onclick = function bgImg(){   //给他添加点击事件
 var bo = document.getElementById('bo');  //获取body
 var i = parseInt(Math.random()*7);   //写个随机数字
 bo.setAttribute("style","background:url('img/bj"+(i+1)+".jpg') no-repeat;background-size:100% 100%");//更改他的样式
}

登入後複製

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7818

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1238

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 30, 2024 am 10:31 AM

阿里雲盤，這款備受歡迎的儲存工具，不僅可以幫助我們有效率地管理個人資源，還提供了許多便利功能。那麼許多用戶在搜尋雲盤資源的時候，可能會搜不到，所以想要搜尋全盤的所有資源，那麼在下文中就由本站小編來為大家詳細解答這一問題，分享具體的搜尋方法，想要了解的使用者就快來跟著本文一起操作了解吧！阿里雲盤搜怎麼索別人的資源1、先在阿里雲盤的資料夾目錄中搜尋資源檔案的具體路徑即可找到對應的資料夾了。 2.然後使用文件搜尋功能，輸入想要尋找的關鍵字即可找到相關的文件內容。 3.接著我們透過其他人分享鏈接，直接定位和下

百度息壤貝殼取得方法介紹 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億元，其中

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版

熱門話題