JavaScript如何实现百度搜索框效果-创新互联

这篇文章主要介绍JavaScript如何实现百度搜索框效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联是一家专注网站建设、网络营销策划、微信小程序开发、电子商务建设、网络推广、移动互联开发、研究、服务为一体的技术型公司。公司成立十多年以来，已经为近1000家成都假山制作各业的企业公司提供互联网服务。现在，服务的近1000家客户与我们一路同行，见证我们的成长；未来，我们一起分享成功的喜悦。

效果:

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

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

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

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

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

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

界面：

JavaScript如何实现百度搜索框效果

界面html代码：




 
 百度一下，你就知道
 　　
 

　　
 
 
  时间：
  
  |
  换肤
  消息
 
 
  新闻
  hao123
  地图
  视频
  贴吧
  学术
  登陆
  注册

百度一下

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

张一山杨紫互怼

土耳其客机被吊起

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

//百度搜索框 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

以上是“JavaScript如何实现百度搜索框效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

网站栏目：JavaScript如何实现百度搜索框效果-创新互联
文章路径：http://lszwz.com/article/espis.html

其他资讯

售后响应及时

7×24小时客服热线

数据备份

更安全、更高效、更稳定

价格公道精准

项目经理精准报价不弄虚作假

合作无风险

重合同讲信誉，无效全额退款

乐山小谭建站工作室是一家专注从事于高品质视觉体验及互联网设计开发，乐山网站建设，乐山网站设计，乐山网页设计，乐山网站制作，品牌网站建设，营销网站建设，集团网站建设，企业网站建设，外贸网站建设，响应式网站建设，小程序开发，微信开发，企业形象设计，企业宣传视频等服务，小谭建站位于乐山市龙岗区大运软件小镇，小谭建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。

友情链接交换友情链接

网站设计产品包装设计广汉网站建设雅安机房托管网站建设开发成都广告设计网站设计南充主机托管 vi形象设计 H5网站制作

乐山网站建设

JavaScript如何实现百度搜索框效果-创新互联

其他资讯

联系我们

135-1821-9792

028-86922220

快捷导航

二维码

友情链接交换友情链接

乐山网站建设

JavaScript如何实现百度搜索框效果-创新互联

其他资讯

联系我们

135-1821-9792

028-86922220

快捷导航

二维码

友情链接 交换友情链接

友情链接交换友情链接