怎样使用JS实现百度搜索框-js教程-PHP中文网

首页

web前端

js教程

怎样使用JS实现百度搜索框

php中世界最好的语言

May 23, 2018 pm 03:34 PM

javascript 搜索百度

这次给大家带来怎样使用JS实现百度搜索框，使用JS实现百度搜索框的注意事项有哪些，下面就是实战案例，一起来看一下。

效果:

　　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">　　<!-- 当页面加载时调用函数 -->
 <p 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>
 </p>
 <img src="img/logo.png" alt="" id="logo">
 <p class="baidu_box">
  <input type="text" name="" value=" " id="seek">
  <img src="img/xj.png" alt="" class="icon">
  <p id="baidu">百度一下</p>
  <ul>
   <p>十九大后 习大大反腐不歇脚</p>
   <p>张一山杨紫互怼</p>
   <p>土耳其客机被吊起</p>
  </ul>
 </p>
 <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=&#39;js/index.js&#39;></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%");//更改他的样式
}

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7690

Java教程

1639

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1229

显示更多

Related knowledge

2 个月不见，人形机器人 Walker S 会叠衣服了 Apr 03, 2024 am 08:01 AM

机器之能报道编辑：吴昕国内版的人形机器人+大模型组队，首次完成叠衣服这类复杂柔性材料的操作任务。随着融合了OpenAI多模态大模型的Figure01揭开神秘面纱,国内同行的相关进展一直备受关注。就在昨天，国内"人形机器人第一股"优必选发布了人形机器人WalkerS深入融合百度文心大模型后的首个Demo，展示了一些有趣的新功能。现在，得到百度文心大模型能力加持的WalkerS是这个样子的。和Figure01一样，WalkerS没有走动，而是站在桌子后面完成一系列任务。它可以听从人类的命令，折叠衣物

百度Apollo重磅发布全球首个支持L4级自动驾驶的大模型Apollo ADFM Jun 04, 2024 pm 08:01 PM

5月15日，百度Apollo在武汉百度萝卜快跑汽车机器人智行谷举办ApolloDay2024，全方位展示百度十年深耕自动驾驶的重大进展，基于大模型带来技术阶跃、面向乘客安全全新定义的无人车和全球最大的无人车自动运营网络，百度已经做到自动驾驶比人类驾驶更安全。得益于此，更加安全舒适、绿色低碳的出行方式正从理想成为现实。百度集团副总裁、智能驾驶事业群组总裁王云鹏现场表示：“我们做无人车的初衷，是满足老百姓日益增长的、对美好出行的向往，人民群众的满意是我们前进的动力。因为安全、所以美好，我们欣喜地看到

百度息壤贝壳获取方法介绍 Mar 28, 2024 am 09:11 AM

在息壤中有不少用户不知道贝壳在哪里，怎么才能获得，有些玩家转了几个小时候都没有找到，下面小编就带来了百度息壤贝壳的获取方法，快来一起看看吧。百度息壤贝壳怎么获得1、首先我们需要来到社区，然后来到下图的这个位置。2、在这里选择目的地，选择进入188层。3、进入到188层后，在周围转悠会有这个提示，点击我知道了就行。4、贝壳的位置可能会有些难找，就在188电梯的后面，有个发光的小点就是贝壳。5、捡贝壳需要用VR手柄才能捡，点击贝壳就可以了。兑换方式1、首先点击页面右上方的“设置”图标，在设置中选择“

deepseek网页版入口 deepseek官网入口 Feb 19, 2025 pm 04:54 PM

DeepSeek 是一款强大的智能搜索与分析工具，提供网页版和官网两种访问方式。网页版便捷高效，免安装即可使用；官网则提供全面产品信息、下载资源和支持服务。无论个人还是企业用户，都可以通过 DeepSeek 轻松获取和分析海量数据，提升工作效率、辅助决策和促进创新。

百度李彦宏率队拜访中国石油，讨论油气行业智能化 May 07, 2024 pm 06:13 PM

本站5月7日消息，5月6日，百度创始人、董事长兼首席执行官李彦宏带队在北京拜访中国石油天然气集团有限公司（以下简称“中国石油”），并与中国石油集团董事长、党组书记戴厚良举行会谈。双方就强化合作，推动能源行业与数字化智能化深度融合进行了深入交流。中国石油将加快推进数字中中国石油建设，加强与百度集团合作，推动能源行业与数字化智能化的深度融合，为保障国家能源安全作出更大贡献。李彦宏表示，大模型展现出的“智能涌现”和理解、生成、逻辑、记忆等核心能力，为前沿科技与油气业务结合打开了更加广阔的想象空间。一直

阿里云盘怎么搜索别人的资源 Mar 30, 2024 am 10:31 AM

阿里云盘，这款备受欢迎的存储工具，不仅可以帮助我们高效管理个人资源，还提供了诸多便利功能。那么许多用户在搜索云盘资源的时候，可能会搜不到，所以想要搜索全盘的所有资源，那么在下文中就由本站小编来为大家详细解答这一问题，分享具体的搜索方法，想要了解的用户们就快来跟着本文一起操作了解吧！阿里云盘搜怎么索别人的资源1、首先在阿里云盘的文件夹目录中搜索资源文件的具体路径即可找到对应的文件夹了。2、然后使用文件搜索功能，输入想要查找的关键字即可找到相关的文件内容。3、接着我们通过其他人分享链接，直接定位和下

消息称三星 Galaxy S24 系列手机国行版'即圈即搜”将支持谷歌搜索 Jun 01, 2024 am 09:54 AM

5月31日消息，据博主@i冰宇宙今日爆料，三星GalaxyS24系列手机国行版“即圈即搜”将支持谷歌搜索。具体上线时间，该博主并未透露。根据三星此前介绍，三星GalaxyS24系列实装了众多高阶AI能力，将输入、翻译、录音机、笔记、相机等实用功能AI化，为用户带来更方便、更高效的综合体验。与海外版不同的是，三星GalaxyS24系列的AI功能大多由国内厂商提供服务，例如百度等。此前报道，GalaxyAI深度集成百度文心大模型多项能力，可提供端侧赋能的通话、翻译功能，以及借助生成式AI带来的智能摘

ai工具推荐 Nov 29, 2024 am 11:08 AM

本文介绍了六款流行的 AI 工具，包括抖音豆包、文心一格、腾讯智影、百度飞桨 EasyDL、百度 AI Studio 和讯飞星火认知大模型。这些工具涵盖不同的功能，如文本创作、图像生成、视频编辑和 AI 模型开发。选择合适的 AI 工具需要考虑功能需求、技术水平和成本预算等因素。这些工具为需要 AI 辅助的个人和企业提供了方便且高效的解决方案。

See all articles

怎样使用JS实现百度搜索框

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题