JS 实现百度搜索功能

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

 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