JavaScript如何實(shí)現(xiàn)百度搜索框效果

發(fā)布時間：2021-04-12 09:40:18 來源：億速云閱讀：156 作者：小新欄目：web開發(fā)

這篇文章主要介紹JavaScript如何實(shí)現(xiàn)百度搜索框效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

效果:

　　1.當(dāng)進(jìn)入界面時，自動調(diào)用方法，獲取當(dāng)前的時間，并且實(shí)時更新時間。

　　2.點(diǎn)擊頁面頭部的換膚，自動更換背景圖片

　　3.鼠標(biāo)點(diǎn)擊搜索框的時候自動顯示用戶上次搜索的內(nèi)容，

　　4.當(dāng)鼠標(biāo)放在用戶上次搜索的內(nèi)容的時候搜索框的內(nèi)容變成鼠標(biāo)懸浮的內(nèi)容上

　　5.在搜索框中按回車的時候自動錄入為上次輸入的內(nèi)容中，若本次內(nèi)容和上次內(nèi)容相同則不顯示

　　6.點(diǎn)擊百度一下按鈕自動錄入搜索框中的內(nèi)容為上次搜索的內(nèi)容

界面：

JavaScript如何實(shí)現(xiàn)百度搜索框效果

界面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">　　<!-- 頁面標(biāo)題的圖標(biāo) -->
 <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body onload="dates()" id="bo">　　<!-- 當(dāng)頁面加載時調(diào)用函數(shù) -->
 <div 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="#">學(xué)術(shù)</a></li>
  <li><a href="#">登陸</a></li>
  <li><a href="#">注冊</a></li>
 </ul>
 </div>
 <img src="img/logo.png" alt="" id="logo">
 <div class="baidu_box">
 <input type="text" name="" value=" " id="seek">
 <img src="img/xj.png" alt="" class="icon">
 <div id="baidu">百度一下</div>
 <ul>
  <p>十九大后 習(xí)大大反腐不歇腳</p>
  <p>張一山楊紫互懟</p>
  <p>土耳其客機(jī)被吊起</p>
 </ul>
 </div>
 <ul class="buttom">
 <li><a href="#">把百度設(shè)為首頁</a></li>
 <li><a href="#">關(guān)于百度</a></li>
 <li><a href="#">About Baidu</a></li>
 <li><a href="#">百度推廣</a></li>
 </ul>
 <script type="text/javascript" src='js/index.js'></script>
 <script>
 setInterval('dates()',1000)　　//定時器，每1秒調(diào)用下函數(shù)
 </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 (); //創(chuàng)建新數(shù)組;用來存放用戶上一次搜索的問題
var seek = document.getElementById('seek'); //獲取百度搜索框
var p = document.getElementsByTagName('p'); //獲取下拉標(biāo)簽
baidu.onclick = baiDu;//給百度按鈕創(chuàng)建onclick事件
function baiDu(){
 var seeked = seek.value; //獲取用戶在搜索框中搜索的內(nèi)容
 if((seeked != seekArray[0]) && (seeked != seekArray[1])){ //判斷數(shù)組內(nèi)不能出現(xiàn)重復(fù)的值，若重復(fù)則不能添加到數(shù)組中
 seekArray.unshift(seeked); //將用戶添加的內(nèi)容放入到新創(chuàng)建的內(nèi)數(shù)組中
 }
 seekArray.length = 3;  //將數(shù)組的長度定死為3 ;即顯示搜索框顯示的內(nèi)容就是為3
 for(var x=0;x<seekArray.length;x++){ //將數(shù)組中的東西放入到我們的搜索框下菜單中
 if((seekArray[x] != undefined)){ //判斷用戶上次搜索的東西，假如為空就不顯示
  p[x].innerHTML = seekArray[x];
 }
 }
}

//搜索框獲焦/失焦的狀態(tài)
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){ //當(dāng)在input框中敲回車的時候
 baiDu();  //觸發(fā)baiDu()
 }
}

//點(diǎn)擊用戶搜索過的新聞搜索框直接顯示
for(var x of p){
 x.onmouseover = look ; //遍歷所有的li并且給每個li添加鼠標(biāo)懸浮事件
}
function look(){
 seek.value = this.innerHTML;
}

//獲取當(dāng)前時間
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;
}

//點(diǎn)擊換背景
var bg = document.getElementById('bg');//獲取id為dg的標(biāo)簽
bg.onclick = function bgImg(){  //給他添加點(diǎn)擊事件
 var bo = document.getElementById('bo'); //獲取body
 var i = parseInt(Math.random()*7);  //寫個隨機(jī)數(shù)字
 bo.setAttribute("style","background:url('img/bj"+(i+1)+".jpg') no-repeat;background-size:100% 100%");//更改他的樣式
}

以上是“JavaScript如何實(shí)現(xiàn)百度搜索框效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

JavaScript如何實(shí)現(xiàn)百度搜索框效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽