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 相关文章推荐
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
Node.js模块加载详解
Aug 16 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
JS删除对象中某一属性案例详解
Sep 08 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字符串截取问题
2006/11/28 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
phpinfo的知识点总结
2019/10/10 PHP
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
Python中使用item()方法遍历字典的例子
2014/08/26 Python
详解Python网络爬虫功能的基本写法
2016/01/28 Python
python多线程同步之文件读写控制
2021/02/25 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
PHP开发的一般流程
2013/08/13 面试题
大四毕业生学习总结的自我评价
2013/10/31 职场文书
思想汇报范文
2013/11/04 职场文书
厂长助理岗位职责
2013/12/27 职场文书
记者岗位职责
2014/01/06 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
养牛场项目建议书
2014/05/13 职场文书
单位介绍信格式范文
2015/05/04 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书