JavaScript实现百度搜索框效果

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

效果：

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

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

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

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

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

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

界面：

界面超文本标记语言代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题百度一下，你就知道/title link rel='快捷图标type=' imges/x-icon ' href=' img/fav icon。ico！-页面标题的图标- link rel='样式表type=' text/CSS ' href=' CSS/index。CSS/head body on load=' date()' id=' bo '！-当页面加载时调用函数-左李时间：/li li id='sj'/li li|/li lia id='bg '换肤/a/li lia消息/a/Li/ul ul class=' right ' lia href=' # '新闻/a/Li lia地图/a/li lia href='# '视频/a/li lia href='# '贴吧/a/li lia href='# '学术/a/li lia href='# '登陆/a/li lia href='# '注册/a/Li/ul/div img src=' http : img/logo。png ' alt=' id=' logo ' div class=' Baidu _ box '输入类型=' text ' name=' value=' id=' seek ' img src=' http : img/XJ。png ' alt=' class=' icon ' div id=' Baidu '百度一下/div ul p十九大后习大大反腐不歇脚/p p张一山杨紫互怼/p p土耳其客机被吊起/p/ul/div ul class=' buttom ' lia href=' # '把百度设为首页/a/li lia href='# '关于百度/a/li lia href='# '关于百度/a/li lia href='# '百度推广/a/li /ul脚本类型=' text/JAVAScript ' src=' js/index。js /脚本脚本setInterval(' date()'，1000)//定时器，每一秒调用下函数/script/body/htmlcss代码：

* { margin : 0；padd : 0；}正文，html { width : 100%；高度： 636像素背景： url('./img/bj2。jpg’)不重复；背景尺寸：100% 100% } .nav { width : 100%；height : 32px background : rgba(0，0，0，0.3)；填充-右侧：20 px左填充left:20pxbox大小的：边框-box } .导航左{列表式：无；向左浮动： }。导航。左li {颜色：白色线高： 32px右边距： 12pxfont-size : 13px向左浮动：}.导航。离开了阿利{ color:white}。导航。向左阿利：悬停{光标：指针}。导航右{列表式：无；向右浮动：}.导航。右阿利{颜色：白色线高： 32px边距-左侧： 12pxfont-size : 13pxopacity:1 }。导航。右li {左侧浮动： } #徽标{ margin: 0px自动显示：块；}.百度_ box { width : 646 px h8 : 44 pxmargin 33600 auto相对位置：边距-top : 20px；}.百度_ box # seek { height : 40px宽度： 538像素；向左浮动：文本-缩进： 0.6 emfont-size : 16px}.百度_ box #百度{ width : 104 px x8 : 44 px向左浮动：线高： 44pxfont-size :16 px文本对齐：中心；背景： url('./img/an _ BG。jpg’)不重复；背景尺寸： 100% 100%;}.百度_ box #百度：悬停{光标：指针}。百度_框.图标{位置：绝对值；top: 12pxleft: 490px}。百度_ box。图标：悬停{光标：指针}。百度_ box ul { width: 541px向左浮动：显示器：无；}.百度_ box ul p { width: 542px线高： 40px列表样式：无；显示器：无；文本-缩进： 0.6 em背景：白色} .百度_ box ul p :悬停{光标：指针；背景： url('./img/an _ BG。jpg’)不重复；背景尺寸： 100% 100%;}.但是{ margin: 0 auto宽度： 500像素；高度： 40px页边距-顶部：210 px}.但是li {list-style:无；向左浮动：左边距left: 20px}。但是阿利{行高： 40pxcolor: # 525252}js代码：

//百度搜索框varBaidu=document . getelementbyid(' Baidu ')；//获取百度按钮名称var seekArray=new Array()；//创建新数组；用于存储用户上次搜索的问题是var seek=document . getelementbyid(' seek ')；//获取百度搜索框var p=document . getelementsbytagname(' p ')；//获取下拉标签baidu.onclick=baiDu//创建onclick事件函数BaidU(){ var search=seek . value for BaidU button；//获取内容if((搜索！=seekArray[0])(seek！=seekraray[1]){//判断数组中不能出现重复的值，如果重复则不能添加到数组中。//将用户添加的内容放入新创建的内部数组} seekarray . length=3；//将数组长度设置为3；也就是说，显示搜索框中显示的内容是3 for(var x=0；xseekArray.lengthX ){ //如果((seekArray[x]！=undefined)){ //判断用户上次搜索的内容，如果为空，则不显示p[x]。innerHTML=SeeKarray[x]；} } }//搜索框处于聚焦/失焦状态搜索。onfocus=function(){ for(var x of p){ x . style . display=' block '；} p[0]. ParentNode . style . display=' block '；//} seek . onbulr=function(){ p[0]. parent node . style . display=' none '；for(var x of p){ x . style . display=' none '；} } seek . onkeydown=function(Ent){//console . log(BaidU)；如果(Ent.keyCode==13){ //baiDu()当你在输入框中按回车键时；//触发baiDu() }}//点击用户搜索到的新闻搜索框直接显示为(var x of p){ x . onmouseover=look；//遍历所有li并将鼠标悬停事件添加到每个li}函数look(){ seek . value=this . innerhtml；}//获取当前时间functiondate(){ var now=document . getelementbyid(' SJ ')；可变时间=新日期；var hour=time . gethours()；var mins=time . getminutes()；if(parseInt(分钟)10){ mins='0 '分钟；} now.innerHTML=hour ' : ' mins}//点击更改背景var BG=document . getelementbyid(' BG ')；//获取id为DG {//的标记BG.onclick=functionbgimg()，向他添加一个点击事件var bo=document . getelementbyid(' bo ')；//get body var I=par sent(math . random()* 7)；//写一个随机数bo.setattribute ('style '，' background : URL(' img/bj '(I ^ 1)')。jpg’)不重复；background-size 3:100% 100% ')；//改变他的风格}这是我写的百度搜索框。如果你什么都不懂，请在下面留言！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。