原生JS实现百度搜索功能

　　今天呢给大家分享一下自己用原生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实现百度搜索功能的更多相关文章

JS 实现百度搜索功能
今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...
原生JS模拟百度搜索关键字与跳转
<style type="text/css"> *{ margin: 0; padding: 0; } #text{ width: 300px; height: 30p ...
js/jQuery实现类似百度搜索功能
一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
vue 使用watch监听实现类似百度搜索功能
watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: <!doctype html> <html lang="en"> < ...
原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
原生js实现vue组件功能
在如今VUE盛行的情况下,我们一直在惊叹于VUE的组件的功能,却不知道,原生js早就已经支持了这个功能. 最近在公开课学到的,js还有很多很多需要探索学习. 下面是一个简单的例子 <!DOCTY ...
原生JS实现滑动验证功能
一般很多网站都有滑动验证的功能,简单滑动验证的原理如下图所示: 主要理解思想就行图中的代码可能和实际写的有所不同 HTML和CSS也可根据仔细的喜好就行修改完整代码: <!DOCTYPE h ...
js 获取百度搜索关键词的代码
有可能有时候我们会用到在百度搜什么关键词进来我们的网站的,所有我们又想拿到用户搜索的关键词. 这是我研究了半天所得出的办法.话不多说直接贴代码 <script> function quer ...
js实现百度搜索框滑动固定顶部
现在很多主流系统例如百度.有道.爱奇艺等的搜索框都有一个特点,滑动到刚好看不到搜索框时,固定搜索框到顶部,这也算是一个对用户友好型的操作. 在看了百度的js和css后自己摸索出来实现效果,还是学艺不 ...

随机推荐

Redis学习笔记（一）关于在windows64位环境下的安装学习使用
前言由于工作需要,目前我正在学习使用Redis.我当时学习Redis就从网上下载了点资料就开始学习了.入门看的是<REDIS入门指南>,这本书个人觉得很适合新手用来学习接触.根据书上的引 ...
[Spark性能调优] 第三章 : Spark 2.1.0 中 Sort-Based Shuffle 产生的内幕
本課主題 Sorted-Based Shuffle 的诞生和介绍 Shuffle 中六大令人费解的问题 Sorted-Based Shuffle 的排序和源码鉴赏 Shuffle 在运行时的内存管理 ...
Python多线程编程（第二篇）
一.Python中的上下文管理器(contextlib模块) 上下文管理器的任务是:代码块执行前准备,代码块执行后收拾 1.如何使用上下文管理器: 如何打开一个文件,并写入"hello wo ...
Node Express 初探
一如既往,先上一张图 Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架. 关于Express更多相关知识请链接至官网http://www.expressjs.com.c ...
[原创]在Centos7.2上源码安装PHP、Nginx、Zentao禅道
版本操作系统:CentOS Linux release 7.2.1511 (Core) PHP:5.6.33 Nginx:1.12.2 MySQL:5.6.38(192.168.1.103的Wind ...
[转载]MySQL5.6 PERFORMANCE_SCHEMA 说明
背景: MySQL 5.5开始新增一个数据库:PERFORMANCE_SCHEMA,主要用于收集数据库服务器性能参数.并且库里表的存储引擎均为PERFORMANCE_SCHEMA,而用户是不能创建存储 ...
centOS7-配置网络地址
1.首先需求切换都root账户 # su #输入密码: 2.进入网络配置文件目录查看 ()进入该目录 # /etc/sysconfig/network-scripts ()查看目录下文件 # ll - ...
ElasticSearch 集群监控
要监控哪些 ElasticSearch metrics? Elasticsearch 提供了大量的 Metric,可以帮助您检测到问题的迹象,在遇到节点不可用.out-of-memory.long g ...
为什么arguments是类数组对象
为什么JavaScript里函数的arguments只是array-like object? 只是标准这么规定的,还是有什么设计原因在里面?JavaScript的函数里面的arguments对象有 . ...
DNS Prefetch初认识
今天在看一个后台框架时,发现这样的代码: <link rel="dns-prefetch" href="//0.s3.envato.com">< ...

原生JS实现百度搜索功能

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

随机推荐

热门专题