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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
js检测客户端不是firefox则提示下载
Apr 07 Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
vue中render函数的使用详解
Oct 12 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
如何使用CocosCreator对象池
Apr 14 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
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
python机器学习之随机森林(七)
2018/03/26 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
django2笔记之路由path语法的实现
2019/07/17 Python
python实现的config文件读写功能示例
2019/09/24 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
Farah官方网站:男士服装及配件
2019/11/01 全球购物
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
职称自我鉴定
2013/10/15 职场文书
保险经纪人求职信
2014/03/11 职场文书
个人工作主要事迹
2014/05/08 职场文书
社区反邪教工作方案
2014/06/16 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
《叶问2》观后感
2015/06/15 职场文书