百度怎么搜索网站php id=,通过JS技术如何实现百度搜索

这篇文章给大家介绍了js实现百度搜索功能，代码分为html部分和css折叠样式部分，具体实现代码大家参考下本文

今天我们来用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"); //获取所有的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

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

}

otext.onclick = function(e){

ose.style.display = "block";

var e = event || window.event;

e.stopPropagation(); //阻止冒泡事件,除了IE8及以下不兼容,其他浏览器都兼容

e.cancelBubble=true; //阻止冒泡事件,IE8及以下兼容

// alert(e);

}

/*单击body中的任意地方隐藏li*/

document.body.onclick = function(){

ose.style.display = "none";

}

/*单击百度btn的时候触发,并跳到新的连接*/

var btn = document.querySelector("#btn");

cookies = [];

btn.onclick = function(){

/*获取当前input的值*/

var otext = document.getElementById("text").value;

/*将百度作为连接,传入input的值,并跳入新的页面*/

if(otext=="" || otext==null){

window.location.href = "http://127.0.0.1:8020/%E7%99%BE%E5%BA%A6/%E7%99%BE%E5%BA%A6%E9%A6%96%E9%A1%B5.html?__hbt=1516599867084";

}else{

window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext

}

}

/*加载页面input为空*/

function onloads(){

var s = otext.value = null;

$myId("text").focus();

}

function randomBack(){

var randomBk = parseInt(Math.random()*545);

document.body.style.background = "url(https://ss3.bdstatic.com/lPoZeXSm1A5BphGlnYG/skin/"+randomBk+".jpg?2)";

document.body.style.backgroundSize = "100%";

}‘“

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：