这次给大家带来怎样使用源生JS代码实现百度搜索框，使用源生JS代码实现百度搜索框的注意事项有哪些，下面就是实战案例，一起来看一下。
最近做了个百度搜索框今天给大家分享下。
效果:
1.当进入界面时，自动调用方法，获取当前的时间，并且实时更新时间。
2.点击页面头部的换肤，自动更换背景图片
3.鼠标点击搜索框的时候自动显示用户上次搜索的内容，
4.当鼠标放在用户上次搜索的内容的时候搜索框的内容变成鼠标悬浮的内容上
5.在搜索框中按回车的时候自动录入为上次输入的内容中，若本次内容和上次内容相同则不显示
6.点击百度一下按钮自动录入搜索框中的内容为上次搜索的内容
界面：
界面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%");//更改他的样式}
登录后复制
这就是我写的百度搜索框，假如大家有啥不懂的，欢迎下边留言!!
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
注意事项
注意事项
以上就是怎样使用源生JS代码实现百度搜索框的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2752212.html
