JavaScript实现百度搜索框效果-JS Tutorial-php.cn

这篇文章主要为大家详细介绍了JavaScript实现百度搜索框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

最近做了个百度搜索框今天给大家分享下。

效果:

　　1.当进入界面时，自动调用方法，获取当前的时间，并且实时更新时间。

　　2.点击页面头部的换肤，自动更换背景图片

　　3.鼠标点击搜索框的时候自动显示用户上次搜索的内容，

　　4.当鼠标放在用户上次搜索的内容的时候搜索框的内容变成鼠标悬浮的内容上

　　5.在搜索框中按回车的时候自动录入为上次输入的内容中，若本次内容和上次内容相同则不显示

　　6.点击百度一下按钮自动录入搜索框中的内容为上次搜索的内容

界面：

界面html代码：

百度一下，你就知道　　

时间：
|
换肤
消息

百度一下

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

张一山杨紫互怼

土耳其客机被吊起

Copy after login

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;}

Copy after login

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
        
         Copy after login

这就是我写的百度搜索框，假如大家有啥不懂的，欢迎下边留言!!

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支PHP中文网。