JavaScript实现百度搜索框效果
时间:2019-04-14
本文章向大家介绍JavaScript实现百度搜索框效果,主要包括JavaScript实现百度搜索框效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近做了个百度搜索框今天给大家分享下。
效果:
1.当进入界面时,自动调用方法,获取当前的时间,并且实时更新时间。
2.点击页面头部的换肤,自动更换背景图片
3.鼠标点击搜索框的时候自动显示用户上次搜索的内容,
4.当鼠标放在用户上次搜索的内容的时候搜索框的内容变成鼠标悬浮的内容上
5.在搜索框中按回车的时候自动录入为上次输入的内容中,若本次内容和上次内容相同则不显示
6.点击百度一下按钮自动录入搜索框中的内容为上次搜索的内容
界面:
界面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%");//更改他的样式 }
这就是我写的百度搜索框,假如大家有啥不懂的,欢迎下边留言!!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 我的学习、归纳方法(以学习 Maven 为例)
- JDBC面试题都在这里
- 018 final 关键字的用途
- 04-01.总结switch,for,while,do。while跳转语句
- JDBC【介绍JDBC、使用JDBC连接数据库、简单的工具类】
- 019 单例模式的5种写法
- 图书管理系统【部署开发环境、解决分类、图书、前台页面模块】
- 图书管理系统【用户、购买、订单模块、添加权限】
- 04-02.总结switch,for,while,do。while跳转语句
- 图书管理系统【总结】
- JDBC【PreparedStatment、批处理、处理二进制、自动主键、调用存储过程、函数】
- JDBC【事务、元数据、改造JDBC工具类】
- JDBC【数据库连接池、DbUtils框架、分页】
- HTTP常见面试题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 监控Oracle数据泵状态
- MySQL MHA部署 Part 5 MHA部署指南
- MySQL MHA部署 Part 6 MHA故障转移测试
- 一步步搭建基于GTID的MySQL复制
- innobackupex命令总结
- 使用sysbench对数据库进行压测 Part2 sysbench语法介绍
- MySQL Galera Cluster全解析 Part 9 监控Galera Cluster
- redis的介绍及安装
- 使用oradebug捕获SQL语句
- MySQL information_schema详解 PROCESSLIST
- MySQL组复制(MGR)全解析 Part 6 监控MySQL组复制
- 代码审计day2
- 使用XtraBackup备份MySQL 8.0 Part 8 xtrabackup 命令总结
- 代码审计day5
- 使用innobackupex对数据库进行部分备份(指定表或数据库)