实例讲解JS如何实现百度搜索功能-js教程-PHP中文网

首页

web前端

js教程

实例讲解JS如何实现百度搜索功能

小云云

Feb 02, 2018 am 10:00 AM

javascript 实现百度

本文主要和大家介绍js实现百度搜索功能，代码分为html部分和css折叠样式部分，具体实现代码大家参考下本文，希望能帮助到大家。

今天我们来用JS实现百度搜索功能，下面上代码：

　　　　HTML部分：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!--百度iocn图标-->
    <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" rel="external nofollow" type="image/x-icon"/>
    <title>百度一下,你就知道</title>
    <link rel="stylesheet" href="css/baidu.css" rel="external nofollow" />
    <script src="js/H.js"></script>
  </head>
  <body onload="onloads(),randomBack()">
    <p class="box">
      <p class="box_log">
        <p class="box_log_img">
          <img src="img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png"/>
        </p>
      </p>
      <p class="box_text">
        <p class="box_text_content">
          <input type="text" name="text" id="text" value="" autofocus="autofocus"/>
          <input type="button" name="bdyx" id="btn" value="百度一下" />
          <ul id="search">
            <li class="li1" id="0" onclick="iptShow(this.id)"></li>
            <li class="li1" id="1" onclick="iptShow(this.id)"></li>
            <li class="li1" id="2" onclick="iptShow(this.id)"></li>
            <li class="li1" id="3" onclick="iptShow(this.id)"></li>
            <li class="li1" id="4" onclick="iptShow(this.id)"></li>
            <li class="li1" id="5" onclick="iptShow(this.id)"></li>
            <li class="li1" id="6" onclick="iptShow(this.id)"></li>
            <li class="li1" id="7" onclick="iptShow(this.id)"></li>
            <li class="li1" id="8" onclick="iptShow(this.id)"></li>
            <li class="li1" id="9" onclick="iptShow(this.id)"></li>
          </ul>
        </p>
      </p>
    </p>
    <script type="text/javascript" src="js/index.js" ></script>
  </body>
</html>

登录后复制

CSS层叠样式部分：

body{/*清除浏览器自带样式*/
  margin: 0;
  padding: 0;
  /*background-repeat: no-repeat;*/
  min-width: 1200px;
}
.box{/*最大的盒子*/
  width: 100%;
  height: 100%;
  /*background: yellow;*/
  /*height: 636px;*/
}
.box_log{/*log盒子*/
  width: 100%;
  height: 250px;
  text-align: center;
}
.box_log_img{
  margin:0 auto;
  width: 300px;
  height: 150px;
}
.box_log img{
  width: 300px;
  height: 150px;
  margin-top: 38px;
  margin-bottom: 19px;
}
.box_text{/*text搜索框盒子大小*/
  width: 100%;
  height: 36px;
}
.box_text_content{
  width: 640px;
  height: 36px;
  margin: 0 auto;
}

#text{ /*input框的样式*/
  width: 540px;
  height: 36px;
  box-sizing: border-box;
  margin-top: 3px;
  text-indent: 4px;
  outline: none;
}
.log_img{/*input框中的小相机*/
  position: absolute;
  left: 62%;
  top: 35.5%;
}
#btn{ /*按钮的样式*/
  width: 100px;
  height: 36px;
  background: #3385FF;
  border: 0px;
  letter-spacing: 1px;
  color: white;
  margin-left: -5px;
  font-size: 15px;
  box-sizing: border-box;
  transform: translateY(1.5px);
  box-sizing: border-box;
}
#btn:hover{ /*当按钮hover的样式*/
  cursor: pointer;
}
#search{  /*搜索框的样式*/
  width: 540px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
  border: 1px solid #E3E5E4; 
}
#search li{ /*搜索框li的大小颜色*/
  line-height: 36px;
  background: white;
}
#search li:hover{ /*当li hover的样式*/
  background: #F0F0F0;
}
.li1{ /*li中的值缩进*/
  text-indent: 4px;
}

登录后复制

JS部分：

var otext = document.getElementById("text"); //获取input框
ose = document.querySelector("#search"); //通过类名选择器 选择到search框
lis = document.getElementsByClassName("li1"); //获取所有的li
otext.onkeyup = function(){  //当在input框中键盘弹起发生事件
  ose.style.display = otext.value?"block":"none"; /*三目运算符,如果otext.value的值部位空,则block。*/
  var osc = document.createElement("script"); /*创建一个script标签*/
  osc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei";
  /*srcipt的src值引入百度的url,然后将otext文本框中输入的内容连接到url,在后面在运行自己的方法*/
  document.body.appendChild(osc);
  /*将创建好的script标签元素放入body中*/
  /*input框中按下回车根据input的值跳转页面*/
  if(event.keyCode==13){
    /*将百度作为连接,传入input的值,并跳入新的页面*/
    window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value
  }
}
var count = 0;
var search = 0;
var arr = ose.children; /*获取ose下的所有li*/
function houxiaowei(json){
  var jsonLength = 0; /*json长度的初始值*/
//          console.log(json.s);
  for(var x in json.s){  /*将循环的次数变成json的长度*/
    jsonLength++;
  }
//          console.log(jsonLength);
  for(var i=0;i<lis.length;i++){
    if(jsonLength==0){ /*如果遍历出的长度等于0,li的值为空*/
      arr[i].innerHTML = null;  
    }else{
      if(json.s[i]!=null){/*如果json[i]的值不等于空,则将它的值放入li中*/
        arr[i].innerHTML = json.s[i];
      }
    }
  }
  if(count==lis.length-1){
    count=0;
    search=0;
  }
  count++;
  search++;
}
/*单击li中的值显示在input框中*/
function iptShow(thisId){
  otext.value = arr[thisId].innerHTML;
  window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value
}
otext.onclick = function(e){
  ose.style.display = "block";
  var e = event || window.event;
  e.stopPropagation();  //阻止冒泡事件,除了IE8及以下不兼容,其他浏览器都兼容
  e.cancelBubble=true; //阻止冒泡事件,IE8及以下兼容
//        alert(e);
}
/*单击body中的任意地方隐藏li*/
document.body.onclick = function(){
  ose.style.display = "none";
}
/*单击百度btn的时候触发,并跳到新的连接*/
var btn = document.querySelector("#btn");
cookies = []; 
btn.onclick = function(){
  /*获取当前input的值*/
  var otext = document.getElementById("text").value;
  /*将百度作为连接,传入input的值,并跳入新的页面*/
  if(otext=="" || otext==null){
    window.location.href = "http://127.0.0.1:8020/%E7%99%BE%E5%BA%A6/%E7%99%BE%E5%BA%A6%E9%A6%96%E9%A1%B5.html?__hbt=1516599867084";
  }else{
    window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext
  }
}
/*加载页面input为空*/
function onloads(){
  var s = otext.value = null;
  $myId("text").focus();
}
function randomBack(){
  var randomBk = parseInt(Math.random()*545);
  document.body.style.background = "url(https://ss3.bdstatic.com/lPoZeXSm1A5BphGlnYG/skin/"+randomBk+".jpg?2)";
  document.body.style.backgroundSize = "100%";
}‘“

登录后复制

　　搜索功能的实现源于百度的 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei，这个链接,其中”wd”的值为input框中需要搜索的值,它会返回一个json对象。&cb的值是一个方法或者是函数，它用来将json中的值提取出来放入li中。

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7681

Java教程

1639

CakePHP 教程

1393

Laravel 教程

1286

PHP教程

1229

显示更多

Related knowledge

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

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

如何在华为手机上实现微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在华为手机上实现微信分身功能随着社交软件的普及和人们对隐私安全的日益重视，微信分身功能逐渐成为人们关注的焦点。微信分身功能可以帮助用户在同一台手机上同时登录多个微信账号，方便管理和使用。在华为手机上实现微信分身功能并不困难，只需要按照以下步骤操作即可。第一步：确保手机系统版本和微信版本符合要求首先，确保你的华为手机系统版本已更新到最新版本，以及微信App

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

消息称三星 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版

热门话题