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 相关文章推荐
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
innerText 使用示例
Jan 23 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
jQuery中extend函数详解
Feb 13 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
小程序实现录音功能
Sep 22 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代码运行时间查看类代码分享
2011/08/06 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
css3绘制百度的小度熊
2018/10/29 HTML / CSS
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
职员竞岗演讲稿
2014/05/14 职场文书
经典毕业生求职信
2014/07/12 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
读书笔记格式
2015/07/02 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python