JavaScript实现百度搜索框效果


Posted in Javascript onMarch 26, 2020

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

效果:

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

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

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

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

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

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

界面:

JavaScript实现百度搜索框效果

界面html代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>百度一下,你就知道</title>
 <link rel="shortcut icon" type="imges/x-icon" href="img/favicon.ico"><!-- 页面标题的图标 -->
 <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body onload="dates()" id="bo">
<!-- 当页面加载时调用函数 -->
 <div class="nav">
 <ul class="left">
  <li>时间:</li>
  <li id="sj"></li>
  <li>|</li>
  <li><a id="bg">换肤</a></li>
  <li><a>消息</a></li>
 </ul>
 <ul class="right">
  <li><a href="#">新闻</a></li>
  <li><a href="#">hao123</a></li>
  <li><a href="#">地图</a></li>
  <li><a href="#">视频</a></li>
  <li><a href="#">贴吧</a></li>
  <li><a href="#">学术</a></li>
  <li><a href="#">登陆</a></li>
  <li><a href="#">注册</a></li>
 </ul>
 </div>
 <img src="img/logo.png" alt="" id="logo">
 <div class="baidu_box">
 <input type="text" name="" value=" " id="seek">
 <img src="img/xj.png" alt="" class="icon">
 <div id="baidu">百度一下</div>
 <ul>
  <p>十九大后 习大大反腐不歇脚</p>
  <p>张一山杨紫互怼</p>
  <p>土耳其客机被吊起</p>
 </ul>
 </div>
 <ul class="buttom">
 <li><a href="#">把百度设为首页</a></li>
 <li><a href="#">关于百度</a></li>
 <li><a href="#">About Baidu</a></li>
 <li><a href="#">百度推广</a></li>
 </ul>
 <script type="text/javascript" src='js/index.js'></script>
 <script>
 setInterval('dates()',1000)
//定时器,每1秒调用下函数
 </script>
</body>
</html>

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<seekArray.length;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%");//更改他的样式
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
Java中Timer的用法详解
Oct 21 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 #Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 #Javascript
JS模拟实现哈希表及应用详解
May 04 #Javascript
vue地区选择组件教程详解
May 04 #Javascript
Vue 按键修饰符处理事件的方法
May 04 #Javascript
vue mint-ui tabbar变组件使用
May 04 #Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 #Javascript
You might like
php miniBB中文乱码问题解决方法
2008/11/25 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
Python闭包实现计数器的方法
2015/05/05 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
django的settings中设置中文支持的实现
2019/04/28 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
继承权公证书
2014/04/09 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
商业用房租赁协议书
2014/10/13 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
Python中基础数据类型 set集合知识点总结
2021/08/02 Python