JavaScript实现百度搜索框效果

网络编程 2024/11/14 佚名

3 2 1

最近做了个百度搜索框今天给大家分享下。

效果:

　　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="/UploadFiles/2021-04-02/logo.png">

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%");//更改他的样式
}



这就是我写的百度搜索框，假如大家有啥不懂的，欢迎下边留言!!
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js百度搜索框效果,js百度搜索框,js百度搜索框效果,js搜索效果

标签：

js百度搜索框效果,js百度搜索框,js百度搜索框效果,js搜索效果

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“JavaScript实现百度搜索框效果”

JavaScript实现百度搜索框效果

暂无“JavaScript实现百度搜索框效果”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2024年11月14日

JavaScript实现百度搜索框效果

js百度搜索框效果,js百度搜索框,js百度搜索框效果,js搜索效果

基于jQuery.i18n实现web前端的国际化

JS与CSS3实现图片响应鼠标移动放大效果示例

评论“JavaScript实现百度搜索框效果”

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接