您的位置：首页 > 运维架构 > 网站架构

JavaScript之为您的网站添加百度搜索框

2017-01-11 07:18 267 查看

为你的网站添加百度搜索功能！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width",initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>baidu</title>
<style type="text/css">
/*body,html{
height: 100%;
width: 100%;
}*/
*{
margin: 0px;
padding: 0px;
}
#img{
width: 2rem;
margin: 100px auto 0px;
}
#img img{

width: 2rem;
height: 1.2rem;
}
#te{
height: 0.2rem;
line-height: 0.2rem;
width: 2.5rem;
float: left;
text-indent: 0.05rem;
}
#but{
width: 0.4rem;
height: 0.22rem;
line-height: 0.2rem;
float: left;
}
#box{
width: 3.0rem;
margin: 0 auto 0;
position: relative;
}
#show{
width: 3.0rem;
/*border: 1px solid red;*/
margin:0 auto 0;

display: none;
position: relative;
}
#show ul li{
float: left;
width: 2rem;
height: 0.2rem;
list-style: none;
}
a{
text-decoration: none;
display: block;
font-size: 0.1rem;
}
</style>
</head>
<body>
<div id="img">
<img src="images/logo.png">
</div>
<div id="box">
<input type="text" name="search" id="te">
<input type="button" name="" id="but" value="百度一下">
</div>
<div id="show">
<ul>

</ul>
</div>
<script type="text/javascript" >
document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth/10 + "px";
var inp = document.getElementById('te');
var show = document.getElementById('show');
var oul = document.getElementsByTagName('ul')[0];

c0fd
inp.onkeyup = function(){

if(inp.value){
show.style.display="block";
}else{
show.style.display="none";
}
var os = document.createElement('script');
os.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+inp.value+'&json=1&p=3&sid=1458_21079_18133_20697_20930&req=2&csor=1&cb=figting'
document.body.appendChild(os);
}
var but = document.getElementById('but');
but.onclick = function(){
var url = 'https://www.baidu.com/s?wd='+inp.value+'&rsv_spt=1&rsv_iqid=0xc918c1cc0000cae8&issp=1&f=8&rsv_bp=0&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=0&rsv_sug3=2&rsv_sug1=2&rsv_sug7=101&inputT=333217&rsv_sug4=333218';
window.open(url);

}
function figting(mjson){
oul.innerHTML = "";
var l = mjson.s;
for ( var i = 0;i<l.length;i++) {
var oli = document.createElement('li');
oli.innerHTML='<a href=https://www.baidu.com/s?wd='+l[i]+'&rsv_spt=1&rsv_iqid=0xc918c1cc0000cae8&issp=1&f=8&rsv_bp=0&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=0&rsv_sug3=2&rsv_sug1=2&rsv_sug7=101&inputT=333217&rsv_sug4=333218>'+l[i]+'</a>'
oul.appendChild(oli);

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 百度搜索

相关文章推荐

新的分享

章节导航