JavaScript实现百度搜索框效果

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

效果:

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

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

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

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

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

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

界面:

界面HTML代码

<Meta charset="UTF-8"> <a href="https://www.f2er.com/tag/baidu/" target="_blank" class="keywords">百度</a>一下,你就知道 logo.png" alt="" id="logo">
Box"> 百度一下

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

    张一山杨紫互怼

    土耳其客机被吊起

css代码

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搜索框下菜单中 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%");//更改他的样式
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数...
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言...
什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源...
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有...
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图, :视图模...
首先我们需要一个html代码的框架如下: 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...