JS调用百度api接口——实现简单的百度页面

描述：

效果：

实现：

css文件：

@charset "utf-8";
/* CSS Document */
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.ss{
    border: 1px solid #000000;
}
.ss li
{
    /*border-bottom: 1px solid #999999;*/
    padding: 10px 20px;
    text-align: left;
}
.ss li:hover{
    background-color:#e2e2e2;
    cursor: pointer;
}
#top {
    float: right;
}

#top li{
    padding:10px;
    float: left;
}
#top a {
    color: #000000;
    font-size: 14px;
    font-weight: 600;
}
#top a:hover{color:#0A09BE}

#img_baidu {
    height: 150px;
    clear: both;
    display: block;
    margin: 0 auto;
    background: #FFFFFF;
}

#text_baidu {
    width: 680px;
    margin: 36px auto;
    position: relative;
    background: #FFFFFF;
}

#texts{
    width: 558px;
    height: 38px;
    left: 0;
    position: absolute;
    border: blue 1px solid;
}

#sub{
    width:120px;
    height: 40px;
    top: 0;
    right: 0;
    position: absolute;
    background:#467EE9;
    color: #FFFFFF;
    border-style: none;
    font-size: 16px;
}

#end {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100px;
    color: #9d9d9d;
    font-size: 12px;
    height: 80px;
    background: #FFFFFF;
}

#end p {
    color: #000000;
    font-size: 14px;
}

#end a {
    color: #9d9d9d;
    font-size: 12px;
}

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/bd.css"/>

    <!--<script src="http://localhost:80/js/Method.js"></script>-->
</head>
<body>
<br>
    <div id="top" >
        <ul>
            <li> <a href="#">新闻 </a></li>
            <li> <a href="#">hao123 </a></li>
            <li> <a href="#">地图 </a></li>
            <li> <a href="#">视频 </a></li>
            <li> <a href="#">贴吧 </a></li>
            <li> <a href="#">学术 </a></li>
            <li> <a href="#">登录 </a></li>
            <li> <a href="#">设置 </a></li>
            <li> <a href="#">更多产品 </a></li>
        </ul>
    </div>

    <img src="images/bd_logo1.png" id="img_baidu">

    <div id="text_baidu">
        <form method="post" action="" name="bd">
            <input type="text" id="texts">
            <input type="button" value="百度一下" id="sub" >
        </form>
    </div>

    <div id="end">
        <div>
            <img src="images/zbios_efde696.png" width="60px">
            <p>百度</p>
        </div>

        <div>
            <a href="#">把百度设为主页 </a>&nbsp;&nbsp;&nbsp; <a href="#">关于百度 </a>&nbsp;&nbsp;&nbsp; <a href="#">About  Baidu</a>&nbsp;&nbsp;&nbsp;<a href="#">百度推广</a>&nbsp;&nbsp;&nbsp;<br>

            ©2018 Baidu <a href="#">使用百度前必读 </a> &nbsp;&nbsp; <a href="#">意见反馈 </a>&nbsp;&nbsp;京ICP证030173号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#">京公网安备11000002000001号</a>&nbsp;&nbsp;&nbsp;
        </div>
    </div>
<script>
    /*
    *  1、cors
    *  2、jsonp解决
    *  3、websocket解决（不讲解）
    *  （做一个本地服务，这个本地服务访问跨域服务通信，然后再传给本地）中间介质跨域
    *
    *
    * */

    //        Method.$c("div",document.body);
    var script,ul,textSub;
    var texts=document.getElementById("texts");
    var textSub=document.getElementById("sub");

    texts.addEventListener("input",inputHandler);
    textSub.addEventListener("click",subClickHandler);

    function inputHandler(e) {
        search(texts.value);
    }

    function search(searchStr) {
        if(script){
            script.remove();
            script=null;
        }
        script=document.createElement("script");//百度API
        script.src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+searchStr+"&json" +
            "=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback";
        document.body.appendChild(script);
    }

    function callback(obj) {
        if(ul){
            ul.remove();
            ul=null;
        }
        ul=document.createElement("ul");
        ul.className="ss";
        ul.style.width=texts.clientWidth+"px";
        for(var i=0;i<6;i++){//搜素框内有几个数据
            var li=document.createElement("li");
            li.textContent=obj.s[i];
            li.addEventListener("click",clickHandler);
            ul.appendChild(li);
        }
        ul.firstElementChild.style="padding-top:50px";//第一个显示出来
        texts.parentElement.insertBefore(ul,texts.nextElementSibling);
    }

    function clickHandler(e) {//百度API
        location.href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=98012088_10_dg&wd="
            +this.textContent+"&rsv_pq=cb75ad3f00000fa1&rsv_t=e991pW4yEPgJGzdMD%2Bdfto2OgQRU12dPWLNRqfNP8twO5%2ByL0pdM%2BqfQ2UhzBJ5vXgzkVHU&rqlang=cn&rsv_enter=1&rsv_sug3=8&rsv_sug1=8&rsv_sug7=101&rsv_sug2=0&inputT=1358&rsv_sug4=68195";
    }

    function subClickHandler(e) {//百度API
        location.href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=98012088_10_dg&wd="
            +texts.value+"&rsv_pq=cb75ad3f00000fa1&rsv_t=e991pW4yEPgJGzdMD%2Bdfto2OgQRU12dPWLNRqfNP8twO5%2ByL0pdM%2BqfQ2UhzBJ5vXgzkVHU&rqlang=cn&rsv_enter=1&rsv_sug3=8&rsv_sug1=8&rsv_sug7=101&rsv_sug2=0&inputT=1358&rsv_sug4=68195";
    }


</script>
</body>
</html>

JS调用百度api接口——实现简单的百度页面

描述：

效果：

实现：

猜你喜欢