JS 实现百度搜索功能


Posted in Javascript onFebruary 01, 2018

今天我们来用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()">
    <div class="box">
      <div class="box_log">
        <div class="box_log_img">
          <img src="img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png"/>
        </div>
      </div>
      <div class="box_text">
        <div 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>
        </div>
      </div>
    </div>
    <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中。

总结

以上所述是小编给大家介绍的JS 实现百度搜索功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
jQuery对象和DOM对象相互转化
Apr 24 Javascript
JQuery 学习技巧总结
May 21 Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 #Javascript
微信小程序日期时间选择器使用方法
Feb 01 #Javascript
NW.js 简介与使用方法
Feb 01 #Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 #Javascript
Vue组件之自定义事件的功能图解
Feb 01 #Javascript
微信小程序三级联动选择器使用方法
May 19 #Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 #jQuery
You might like
如何写php程序?
2006/12/08 PHP
php之可变变量的实例详解
2017/09/12 PHP
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
python将文本转换成图片输出的方法
2015/04/28 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
python实现电子词典
2020/03/03 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
电信专业应届生自荐信
2013/09/28 职场文书
自主招生自荐信
2013/12/08 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
购房个人委托书范本
2014/10/11 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
校园运动会广播稿
2015/08/19 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
Django基础CBV装饰器和中间件
2022/03/22 Python