如何使用源生JS程式碼實作百度搜尋框

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

最近做了個百度搜尋框今天來跟大家分享下。

效果:

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

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

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

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

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

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

介面：

介面html程式碼：

nbsp;html>


 <meta>
 <title>百度一下，你就知道</title>
 <link>　　<!-- 页面标题的图标 -->
 <link>

　　<!-- 当页面加载时调用函数 -->
 <p>
  </p>

   
• 时间：
   
•    
• |
   
• 换肤
   
• 消息
  

  

   
• 新闻
   
• hao123
   
• 地图
   
• 视频
   
• 贴吧
   
• 学术
   
• 登陆
   
• 注册
  

     

        

百度一下

  

   

十九大后 习大大反腐不歇脚

   

张一山杨紫互怼

   

土耳其客机被吊起

  

   

  
• 把百度设为首页
  
• 关于百度
  
• About Baidu
  
• 百度推广
 

 <script></script>  <script> setInterval(&#39;dates()&#39;,1000)　　//定时器，每1秒调用下函数 </script>

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 seek.onfocus seek.onblur seek.onkeydown for function var bg.onclick><p style="text-align: left;">這就是我寫的百度搜尋框，假如大家有啥不懂的，歡迎下邊留言!!</p>
<p>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ </p>
<p>推薦閱讀：</p>
<p><a href="http://www.php.cn/js-tutorial-399766.html" target="_blank">怎麼操作node實作爬蟲效果</a><br></p>
<p><a href="http://www.php.cn/js-tutorial-399758.html" target="_blank">#vue嵌套路由與404重定向使用案例分享</a><br></p>#</seekarray.length>

以上是如何使用源生JS程式碼實作百度搜尋框的詳細內容。更多資訊請關注PHP中文網其他相關文章！