资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

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

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

创新互联公司是专业的新蔡网站建设公司，新蔡接单;提供成都网站设计、网站建设、外贸网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行新蔡网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

效果:

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

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

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

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

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

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

界面：

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

界面html代码：




 
 百度一下，你就知道
 　　
 

　　
 
 
  
  • 时间：
    • 
  
  
  • |
    • 
  
  • 换肤
    • 
  
  • 消息
    • 
 
 
  
  • 新闻
    • 
  
  • hao123
    • 
  
  • 地图
    • 
  
  • 视频
    • 
  
  • 贴吧
    • 
  
  • 学术
    • 
  
  • 登陆
    • 
  
  • 注册
    • 
 
 
             百度一下
       
       
  • 把百度设为首页
    •  
  • 关于百度
    •  
  • About Baidu
    •  
  • 百度推广
    •      

    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
    以上是“JavaScript如何实现百度搜索框效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
                
            
                        
    
            分享标题：JavaScript如何实现百度搜索框效果            
    
            分享地址：http://cdkjz.cn/article/jhhood.html
        
        
    
            返回首页
            了解更多建站资讯
        
    
    


    
    
    相关资讯
    
    
    
        
    
    

    

    
    
    
        
    
            
    
                多年建站经验
            
    
            
    
                
    多一份参考，总有益处
    
                
     联系快上网，免费获得专属《策划方案》及报价
    
                
    
                    
    咨询相关问题或预约面谈，可以通过以下方式与我们联系
    
                    
     大客户专线   成都：13518219792
                          座机：028-86922220
                    
    
                
    
            
    
        
    
        
    
            在线咨询
            提交需求
        
    
    
    

    

    
    
    
        
    
            
    
                友情链接
                交换友情链接
            
    
            
    
                
    
                    绵阳科技城电信IDC机房梅州网站建设化妆品企业网站建设方案成都申请ssl证书资中网站建设四川盐亭做网站网页设计制作云主机简阳电信机房成都展柜定制                
    
            
    
        
    
    
    
    
    
        
    
            
    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
    
            
    
                成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
    
            
    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图