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

　　　　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");  //获取所有的liotext.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

　　搜索功能的实现源于百度的 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei，这个链接,其中”wd”的值为input框中需要搜索的值,它会返回一个json对象。&cb的值是一个方法或者是函数

，它用来将json中的值提取出来放入li中。

　　　　今天就分享到这里~