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 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
this在vue和小程序中的使用详解
2019/01/28 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
Python如何判断数独是否合法
2016/09/08 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
Python3 翻转二叉树的实现
2019/09/30 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
民事授权委托书范文
2014/08/02 职场文书
2014年双拥工作总结
2014/11/21 职场文书
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python
Rust中的Struct使用示例详解
2022/08/14 Javascript