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 相关文章推荐
jQuery 操作option的实现代码
Mar 03 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
JQuery学习总结【一】
Dec 01 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
JavaScript实现滚动加载更多
Dec 27 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 Javascript
一文搞懂redux在react中的初步用法
Jun 09 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/10/09 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
python实现的解析crontab配置文件代码
2014/06/30 Python
Python socket 套接字实现通信详解
2019/08/27 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
css3 矩阵的使用详解
2018/03/20 HTML / CSS
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
代办委托书怎样写
2014/04/08 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
放牛班的春天观后感
2015/06/01 职场文书
岁月神偷观后感
2015/06/11 职场文书
百家讲坛观后感
2015/06/12 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
python文件目录操作之os模块
2021/05/08 Python
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
Python实现双向链表
2022/05/25 Python
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers