Home > Article > Web Front-end > How to use Yuansheng JS code to implement Baidu search box
This time I will show you how to use Yuansheng JS code to implement Baidu search box, and what are the precautions for using Yuansheng JS code to implement Baidu search box. The following is a practical case, let’s take a look. .
I recently made a Baidu search box and share it with you today.
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:
百度一下，你就知道
百度一下
十九大后 习大大反腐不歇脚
张一山杨紫互怼
土耳其客机被吊起
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
This is the Baidu search box I wrote , if you don’t understand anything, please leave a message below!!
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How to operate node to achieve crawler effect
Vue nested routing and 404 redirect use case sharing
The above is the detailed content of How to use Yuansheng JS code to implement Baidu search box. For more information, please follow other related articles on the PHP Chinese website!