今天呢给大家分享一下自己用原生JS做的一个百度搜索功能，下面上代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <!--百度iocn图标-->
  6.         <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon"/>
  7.         <title>百度一下,你就知道</title>
  8.         <style type="text/css">
  9.             body{/*清除浏览器自带样式*/
  10.                 margin: 0;
  11.                 padding: 0;
  12.             }
  13.             .box{/*最大的盒子*/
  14.                 width: 100%;
  15.                 /*background: yellow;*/
  16.                 height: 636px;
  17.                 background-image:url("https://ss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin/880.jpg?2");
  18.                 background-size: 100%;
  19.  
  20.             }
  21.             .box_log{/*log盒子*/
  22.                 width: 100%;
  23.             }
  24.  
  25.             .box_log img{/*百度log*/
  26.                 width: 19.8%;
  27.                 margin-left: 49.4%;
  28.                 transform: translate(-50%);
  29.                 margin-top: 38px;
  30.                 margin-bottom: 19px;
  31.             }
  32.             .box_text{/*text搜索框盒子大小*/
  33.                 width: 100%;
  34.                 height: 36px;
  35.             }
  36.             .log_img{/*input框中的小相机*/
  37.                 position: absolute;
  38.                 left: 865px;
  39.                 top: 202px;
  40.             }
  41.             #text{
  42.                 width: 540px;
  43.                 height: 36px;
  44.                 box-sizing: border-box;
  45.                 margin-left: 355px;
  46.                 margin-top: 3px;
  47.                 text-indent: 4px;
  48.             }
  49.             #btn{
  50.                 width: 100px;
  51.                 height: 36px;
  52.                 background: #3385FF;
  53.                 border: 0px;
  54.                 letter-spacing: 1px;
  55.                 color: white;
  56.                 margin-left: -5px;
  57.                 font-size: 15px;
  58.                 box-sizing: border-box;
  59.                 transform: translateY(2px);
  60.                 box-sizing: border-box;
  61.             }
  62.             #btn:hover{
  63.                 cursor: pointer;
  64.             }
  65.             #search{
  66.                 width: 540px;
  67.                 /*background: yellow;*/
  68.                 margin: 0;
  69.                 padding: 0;
  70.                 margin-left: 355px;
  71.                 list-style: none;
  72.                 display: none;
  73.                 border: 1px solid #E3E5E4;
  74.             }
  75.             #search li{
  76.                 line-height: 36px;
  77.                 background: white;
  78.             }
  79.             #search li:hover{
  80.                 background: #F0F0F0;
  81.             }
  82.             .li1{
  83.                 text-indent: 4px;
  84.             }
  85.         </style>
  86.     </head>
  87.     <body>
  88.         <div class="box">
  89.             <div class="box_log">
  90.                 <img src="../img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png"/>
  91.             </div>
  92.             <div class="box_text">
  93.                 <img src="../img/QQ图片20180119115441.png" class="log_img"/>
  94.                 <input type="text" name="text" id="text" value=""/>
  95.                 <input type="button" name="bdyx" id="btn" value="百度一下" />
  96.                 <ul id="search">
  97.                     <li class="li1" id="0" onclick="iptShow(this.id)"></li>
  98.                     <li class="li1" id="1" onclick="iptShow(this.id)"></li>
  99.                     <li class="li1" id="2" onclick="iptShow(this.id)"></li>
  100.                     <li class="li1" id="3" onclick="iptShow(this.id)"></li>
  101.                     <li class="li1" id="4" onclick="iptShow(this.id)"></li>
  102.                     <li class="li1" id="5" onclick="iptShow(this.id)"></li>
  103.                     <li class="li1" id="6" onclick="iptShow(this.id)"></li>
  104.                     <li class="li1" id="7" onclick="iptShow(this.id)"></li>
  105.                     <li class="li1" id="8" onclick="iptShow(this.id)"></li>
  106.                     <li class="li1" id="9" onclick="iptShow(this.id)"></li>
  107.                 </ul>
  108.             </div>
  109.         </div>
  110.  
  111.         <script>
  112.             var otext = document.getElementById("text");  //获取input框
  113.             ose = document.querySelector("#search");  //通过类名选择器 选择到search框
  114.             lis = document.getElementsByClassName("li1");  //获取所有的li
  115.             otext.onkeyup = function(){   //当在input框中键盘弹起发生事件
  116.                 ose.style.display = otext.value?"block":"none";  /*三目运算符,如果otext.value的值部位空,则block。*/
  117.                 var osc = document.createElement("script");  /*创建一个script标签*/
  118.                 osc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei";
  119.                 /*srcipt的src值引入百度的url,然后将otext文本框中输入的内容连接到url,在后面在运行自己的方法*/
  120.                 document.body.appendChild(osc);
  121.                 /*将创建好的script标签元素放入body中*/
  122.  
  123.                 /*input框中按下回车根据input的值跳转页面*/
  124.                 if(event.keyCode==13){
  125.                     /*将百度作为连接,传入input的值,并跳入新的页面*/
  126.                     window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value
  127.                 }
  128.             }
  129.  
  130.             var count = 0;
  131.             var search = 0;
  132.             var arr = ose.children; /*获取ose下的所有li*/
  133.             function houxiaowei(json){
  134.                 var jsonLength = 0;  /*json长度的初始值*/
  135. //                    console.log(json.s);  打印json数据中的所有数据
  136.                 for(var x in json.s){   /*将循环的次数变成json的长度*/
  137.                     jsonLength++;　　　　　
  138.                 }
  139. //                    console.log(jsonLength);  打印json数据的长度
  140.                 for(var i=0;i<lis.length;i++){
  141.                     if(jsonLength==0){  /*如果遍历出的长度等于0,li的值为空*/
  142.                         arr[i].innerHTML = null;
  143.                     }else{
  144.                         if(json.s[i]!=null){/*如果json[i]的值不等于空,则将它的值放入li中*/
  145.                             arr[i].innerHTML = json.s[i];
  146.                         }
  147.                     }
  148.                 }
  149.                 if(count==lis.length-1){
  150.                     count=0;
  151.                     search=0;
  152.                 }
  153.                 count++;
  154.                 search++;
  155.             }
  156.  
  157.             /*单击li中的值显示在input框中*/
  158.             function iptShow(thisId){
  159.                 otext.value = arr[thisId].innerHTML;
  160.                 window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value
  161.             }
  162.             /*单击body中的任意地方隐藏li*/
  163.             document.body.onclick = function(){
  164.                 ose.style.display = "none";
  165.             }
  166.  
  167.             /*单击百度btn的时候触发,并跳到新的连接*/
  168.             var btn = document.querySelector("#btn");
  169.             btn.onclick = function(){
  170.                 /*获取当前input的值*/
  171.                 var otext = document.getElementById("text").value;
  172.                 /*将百度作为连接,传入input的值,并跳入新的页面*/
  173.                 window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext
  174.             }
  175.         </script>
  176.     </body>
  177. </html>

原生JS实现百度搜索功能的更多相关文章

  1. JS 实现百度搜索功能

    今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  2. 原生JS模拟百度搜索关键字与跳转

    <style type="text/css"> *{ margin: 0; padding: 0; } #text{ width: 300px; height: 30p ...

  3. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  4. vue 使用watch监听实现类似百度搜索功能

    watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: <!doctype html> <html lang="en"> < ...

  5. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  6. 原生js实现vue组件功能

    在如今VUE盛行的情况下,我们一直在惊叹于VUE的组件的功能,却不知道,原生js早就已经支持了这个功能. 最近在公开课学到的,js还有很多很多需要探索学习. 下面是一个简单的例子 <!DOCTY ...

  7. 原生JS实现滑动验证功能

    一般很多网站都有滑动验证的功能,简单滑动验证的原理如下图所示: 主要理解思想就行 图中的代码可能和实际写的有所不同 HTML和CSS也可根据仔细的喜好就行修改 完整代码: <!DOCTYPE h ...

  8. js 获取百度搜索关键词的代码

    有可能有时候我们会用到在百度搜什么关键词进来我们的网站的,所有我们又想拿到用户搜索的关键词. 这是我研究了半天所得出的办法.话不多说直接贴代码 <script> function quer ...

  9. js实现百度搜索框滑动固定顶部

    现在很多主流系统例如百度.有道.爱奇艺等的搜索框都有一个特点,滑动到刚好看不到搜索框时,固定搜索框到顶部,这也算是一个对用户友好型的操 作. 在看了百度的js和css后自己摸索出来实现效果,还是学艺不 ...

随机推荐

  1. 第七章：Python基础のXML操作和面向对象(一)

    本課主題 XML介绍与操作实战 shutil 模块介绍与操作实战 subprocess 模块介绍与操作实战 初探面向对象与操作实战 本周作业 XML介绍和操作实战 對於浏览器返回的字符串有以下幾種: ...

  2. SQL Server-聚焦WHERE Column=@Param OR @Param IS NULL有问题？

    前言 上一篇我们讲完SQL动态查询,本节我们继续来讲解SQL动态查询中存在的问题. SQL动态查询条件筛选过滤 当我们创建存储过程调用存储过程时,若筛选条件有值则过滤,没有值则返回所行记录,类似如下查 ...

  3. （GO_GTD_1)基于OpenCV和QT，建立Android图像处理程序

    一.创建新QT工程 一定要是全英文路径,比如"E:\android_qt_opencv\GO_GTD" 由于我们在安装的时候,选择android的工具链,所以在这里会出现以下选择, ...

  4. 七牛php-sdk使用

    使用七牛云存储服务有一年多了,大部分功能基于其PHP-SDK来做开发,现对sdk的一些功能做一个总结. 一.资源上传 上传资源文件到七牛空间的不同实现方法 二.文档转换 介绍如何使用七牛以及七牛第三方 ...

  5. Python 之 基础知识（一）

    首先,对于初学者在一个项目中设置多个程序可以执行,是非常方便的,可以方便对不同知识点的练习和测试 对于商业项目而言,通常在一个项目中,只有一个可以执行的Python程序 一.注释 为了提高可读性,注释 ...

  6. 洛谷 P1967 货车运输

    洛谷 P1967 货车运输 题目描述 A 国有 n 座城市,编号从 1 到 n,城市之间有 m 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q 辆货车在运输货物, 司机们想知道每辆车在 ...

  7. cs231n spring 2017 lecture1 Introduction to Convolutional Neural Networks for Visual Recognition 听课笔记

    1. 生物学家做实验发现脑皮层对简单的结构比如角.边有反应,而通过复杂的神经元传递,这些简单的结构最终帮助生物体有了更复杂的视觉系统.1970年David Marr提出的视觉处理流程遵循这样的原则,拿 ...

  8. iOS学习——iOS项目Project 和 Targets配置详解

    最近开始学习完整iOS项目的开发流程和思路,在实际的项目开发过程中,我们通常需要对项目代码和资料进行版本控制和管理,一般比较常用的SVN或者Github进行代码版本控制和项目管理.我们iOS项目的开发 ...

  9. 2017广东工业大学程序设计竞赛初赛 题解&源码(A,水 B,数学 C,二分 D,枚举 E,dp F,思维题 G,字符串处理 H,枚举)

    Problem A: An easy problem Description Peter Manson owned a small house in an obscure street. It was ...

  10. I Hate It(线段树点修改区间查询)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1754 I Hate It Time Limit: 9000/3000 MS (Java/Others) ...