未加星标

JS 实现百度搜索功能

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

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

    HTML部分:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--百度iocn图标-->
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" rel="external nofollow" type="image/x-icon"/>
<title>百度一下,你就知道</title>
<link rel="stylesheet" href="css/baidu.css" rel="external nofollow" />
<script src="js/H.js"></script>
</head>
<body onload="onloads(),randomBack()">
<div class="box">
<div class="box_log">
<div class="box_log_img">
<img src="img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png"/>
</div>
</div>
<div class="box_text">
<div class="box_text_content">
<input type="text" name="text" id="text" value="" autofocus="autofocus"/>
<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>
</div>
<script type="text/javascript" src="js/index.js" ></script>
</body>
</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<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
}
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中。

总结

以上所述是小编给大家介绍的JS 实现百度搜索功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!


您可能感兴趣的文章:js实现百度搜索提示框JS实现仿google、百度搜索框输入信息智能提示的实现方法JS仿百度搜索自动提示框匹配查询功能.NET使用js制作百度搜索下拉提示效果(不是局部刷新)实现思路JQuery+JS实现仿百度搜索结果中关键字变色效果

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: HTML百度浏览器CSSUT谢大
tags: lt,gt,li,id,box,class,text,input,var,onclick,li1,iptShow,百度,baidu,width
分页:12
转载请注明
本文标题:JS 实现百度搜索功能
本站链接:https://www.codesec.net/view/572220.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(69)