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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <!--百度iocn图标-->

        <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon"/>

        <title>百度一下,你就知道</title>

        <style type="text/css">

            body{/*清除浏览器自带样式*/

                margin: 0;

                padding: 0;

            }

            .box{/*最大的盒子*/

                width: 100%;

                /*background: yellow;*/

                height: 636px;

                background-image:url("https://ss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin/880.jpg?2");

                background-size: 100%;

            }

            .box_log{/*log盒子*/

                width: 100%;

            }

            .box_log img{/*百度log*/

                width: 19.8%;

                margin-left: 49.4%;

                transform: translate(-50%);

                margin-top: 38px;

                margin-bottom: 19px;

            }

            .box_text{/*text搜索框盒子大小*/

                width: 100%;

                height: 36px;

            }

            .log_img{/*input框中的小相机*/

                position: absolute;

                left: 865px;

                top: 202px;

            }

            #text{

                width: 540px;

                height: 36px;

                box-sizing: border-box;

                margin-left: 355px;

                margin-top: 3px;

                text-indent: 4px;

            }

            #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(2px);

                box-sizing: border-box;

            }

            #btn:hover{

                cursor: pointer;

            }

            #search{

                width: 540px;

                /*background: yellow;*/

                margin: 0;

                padding: 0;

                margin-left: 355px;

                list-style: none;

                display: none;

                border: 1px solid #E3E5E4;

            }

            #search li{

                line-height: 36px;

                background: white;

            }

            #search li:hover{

                background: #F0F0F0;

            }

            .li1{

                text-indent: 4px;

            }

        </style>

    </head>

    <body>

        <div class="box">

            <div class="box_log">

                <img src="../img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png"/>

            </div>

            <div class="box_text">

                <img src="../img/QQ图片20180119115441.png" class="log_img"/>

                <input type="text" name="text" id="text" value=""/>

                <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>

        <script>

            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);  打印json数据中的所有数据

                for(var x in json.s){   /*将循环的次数变成json的长度*/

                    jsonLength++;　　　　　

                }

//                    console.log(jsonLength);  打印json数据的长度

                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

            }

            /*单击body中的任意地方隐藏li*/

            document.body.onclick = function(){

                ose.style.display = "none";

            }

            /*单击百度btn的时候触发,并跳到新的连接*/

            var btn = document.querySelector("#btn");

            btn.onclick = function(){

                /*获取当前input的值*/

                var otext = document.getElementById("text").value;

                /*将百度作为连接,传入input的值,并跳入新的页面*/

                window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext

            }

        </script>

    </body>

</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 の 网络编程基础(三)

    本課主題 多线程的创建和使用 消息队列的介绍 Python 操作 memached 和 redis 实战 本周作业 消息队列的介绍 对列是在内存中创建的,如果整个进程里的程序运行完毕之后会被清空,消息 ...

  2. Linux 和Windows之间命令行实现目录或文件互传

    在linux中,我们常用scp命令传输文件: 如以下实例,我们想把当前服务器文件abc.sql传输到192.168.1.1服务器上 我们可以执行以下命令: scp /home/person/hww/a ...

  3. mvc接口、webapi、webservice 对比

    最近做了很多项目,也同时使用了mvc的接口,webapi的接口,以及webservice 的接口.先两两对比如下: mvc和webapi区别: 1.MVC是建站的一种框架,倾向于返回用户的页面请求:a ...

  4. random seed()函数

    用seed()生成随机数字,生成的法则与seed内部的数字相关,如果数字相同,则生成的随机数是相同的. 刷题宝上面的题目: >>> import random >>> ...

  5. oracle查询16个小题

    --1.查询出至少有一个雇员的所有部门 select Dept_id from emp group by Dept_id having count(*)>0; select dname from ...

  6. python的流程控制学习

    _username= 'haozheyu' _password= ' username = input("请输入用户:") password = input("请输入密码 ...

  7. Angular整合zTree

    1 前提准备 1.1 新建一个angular4项目 参考博文:点击前往 1.2 去zTree官网下载zTree zTree官网:点击前往 三少使用的版本:点击前往 2 编程步骤 从打印出zTree对象 ...

  8. 【CSS3 transform属性和过渡属性详解】

    CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...

  9. Java面向对象抽象类实例练习

    abstract class Animal { abstract void eat(); } class Cat extends Animal { void eat() { System.out.pr ...

  10. HDU1097-A hard puzzle-快速幂+取模

    快速幂: 代码: kuaisumi(ll a,ll b){      ll ans=;      while(b){          ==){              ans=ans*a;     ...