How to use JS to implement Baidu search box

This time I will show you how to use JS to implement the Baidu search box, and what are the precautions for using JS to implement the Baidu search box. The following is a practical case, let's take a look.

Effect:

　1. When entering the interface, the method is automatically called to obtain the current time and update the time in real time.

2. Click the skin change at the head of the page to automatically change the background image

3. When the mouse clicks on the search box, it will automatically display the content the user last searched for,

4 .When the mouse is placed on the content the user last searched for, the content of the search box changes to the content hovered by the mouse

　5. When pressing Enter in the search box, it is automatically entered into the last entered content. , if this content is the same as the last content, it will not be displayed

　6. Click the Baidu button to automatically enter the content in the search box as the last searched content

Interface:

Interface html code:

 
 
 　　
 


　　
 

  

   
时间：
   

   
|
   
换肤
   
消息
  
  

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

 
 

  
  
  
百度一下
  

   
十九大后 习大大反腐不歇脚
   
张一山杨紫互怼
   
土耳其客机被吊起
  
 

 

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

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
 I believe you have mastered it after reading the case in this article For more exciting methods, please pay attention to other related articles on the php Chinese website! 
Recommended reading: 
How to use vue to register components

Summary of how to use data-* attributes in H5 
The above is the detailed content of How to use JS to implement Baidu search box. For more information, please follow other related articles on the PHP Chinese website!