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 相关文章推荐
用javascript获取地址栏参数
Dec 22 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
深入了解js原型模式
May 30 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 Javascript
详解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
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
基于mysql的论坛(1)
2006/10/09 PHP
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
Node.js 的模块知识汇总
2017/08/16 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
python类参数self使用示例
2014/02/17 Python
Python3实现连接SQLite数据库的方法
2014/08/23 Python
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
Python PIL图片添加字体的例子
2019/08/22 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
男方父母婚礼答谢词
2014/01/25 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
检讨书范文2000字
2015/01/28 职场文书
餐馆开业致辞
2015/08/01 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript
详解TypeScript中的类型保护
2021/04/29 Javascript
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP