今天呢給大家分享一下自己用原生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>