最近做了個百度搜索框今天給大家分享下。
效果:
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"> <!-- 當頁面加載時調用函數 --> <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="#">學術</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>十九大后 習大大反腐不歇腳</p> <p>張一山楊紫互懟</p> <p>土耳其客機被吊起</p> </ul> </div> <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='js/index.js'></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%");//更改他的樣式}這就是我寫的百度搜索框，假如大家有啥不懂的，歡迎下邊留言!!
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
