So implementieren Sie das Baidu-Suchfeld mit JS

Dieses Mal zeige ich Ihnen, wie Sie JS zum Implementieren des Baidu-Suchfelds verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von JS zum Implementieren des Baidu-Suchfelds? sehen.

Wirkung:

1. Rufen Sie beim Aufrufen der Schnittstelle automatisch die Methode auf, um die aktuelle Uhrzeit abzurufen und die Uhrzeit in Echtzeit zu aktualisieren.

2. Klicken Sie auf die Skin-Änderung am Kopf der Seite, um das Hintergrundbild automatisch zu ändern

3. Wenn die Maus auf das Suchfeld klickt, wird automatisch der Inhalt angezeigt, den der Benutzer zuletzt angezeigt hat gesucht,

4 .Wenn die Maus auf dem Inhalt platziert wird, nach dem der Benutzer zuletzt gesucht hat, ändert sich der Inhalt des Suchfelds in den Inhalt, über den sich die Maus bewegt

5. Beim Drücken der Eingabetaste Im Suchfeld wird automatisch der zuletzt eingegebene Inhalt eingegeben. Wenn der Inhalt dieses Mal mit dem letzten Inhalt übereinstimmt, wird er nicht angezeigt

6. Klicken Sie auf die Schaltfläche „Baidu“, um den Inhalt automatisch einzugeben Inhalt im Suchfeld als Inhalt der letzten Suche

Schnittstelle:

Schnittstelle HTML-Code:

nbsp;html>


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

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

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

  

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

     

        

百度一下

  

   

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

   

张一山杨紫互怼

   

土耳其客机被吊起

  

   

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

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

CSS-Code:

*{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-Code:

//百度搜索框
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>Ich glaube, Sie haben es gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Methoden finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! </p>
<p>Empfohlene Lektüre: </p>
<p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-397860.html" target="_blank">So verwenden Sie Vue zum Registrieren von Komponenten</a><br></p>
<p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-397852.html" target="_blank">Eine Zusammenfassung der Verwendung von Daten-*-Attributen in H5</a> <br></p></seekarray.length>

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Baidu-Suchfeld mit JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!