JS 实现百度搜索功能

2018-06-24 01:28:23来源：未知阅读 ()

　　今天我们来用JS实现百度搜索功能，下面上代码：

　　　　HTML部分：

<!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>
        <link rel="stylesheet" href="css/baidu.css" />
        <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中。

　　　　今天就分享到这里~

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有