原生JS实现百度搜索功能
今天呢给大家分享一下自己用原生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>
原生JS实现百度搜索功能的更多相关文章
- JS 实现百度搜索功能
今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- 原生JS模拟百度搜索关键字与跳转
<style type="text/css"> *{ margin: 0; padding: 0; } #text{ width: 300px; height: 30p ...
- js/jQuery实现类似百度搜索功能
一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
- vue 使用watch监听实现类似百度搜索功能
watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: <!doctype html> <html lang="en"> < ...
- 原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 原生js实现vue组件功能
在如今VUE盛行的情况下,我们一直在惊叹于VUE的组件的功能,却不知道,原生js早就已经支持了这个功能. 最近在公开课学到的,js还有很多很多需要探索学习. 下面是一个简单的例子 <!DOCTY ...
- 原生JS实现滑动验证功能
一般很多网站都有滑动验证的功能,简单滑动验证的原理如下图所示: 主要理解思想就行 图中的代码可能和实际写的有所不同 HTML和CSS也可根据仔细的喜好就行修改 完整代码: <!DOCTYPE h ...
- js 获取百度搜索关键词的代码
有可能有时候我们会用到在百度搜什么关键词进来我们的网站的,所有我们又想拿到用户搜索的关键词. 这是我研究了半天所得出的办法.话不多说直接贴代码 <script> function quer ...
- js实现百度搜索框滑动固定顶部
现在很多主流系统例如百度.有道.爱奇艺等的搜索框都有一个特点,滑动到刚好看不到搜索框时,固定搜索框到顶部,这也算是一个对用户友好型的操 作. 在看了百度的js和css后自己摸索出来实现效果,还是学艺不 ...
随机推荐
- PyQt4 的事件与信号 -- 重写事件处理方法
# PyQt中的事件处理主要依赖重写事件处理函数来实现 import sys from PyQt4 import QtCore, QtGui class MainWindow(QtGui.QWidge ...
- rabbitmq：centos7安装与python调用
1.centos安装rabbitmq 官网下载或者yum list |grep rabbitmq搜索安装,官网是最新的版本 wget http://www.rabbitmq.com/releases/ ...
- 【eclipse】Target runtime Apache Tomcat v7.0 is not defined解决
在eclipse中导入项目时提示Target runtime Apache Tomcat v7.0 is not defined, 解决方法:右键项目--properties--targeted ru ...
- 通俗的解释JAVA wait/notify机制
生活中,我们常遇到需要等待的场景,例如去银行办事,在没轮到自己之前需要一直等待,但是如果需要自己每隔几秒钟就去柜台前看看状况,那肯定是种非常低效和令人恼火的体验.而实际的情况是,接待员会让您拿个号,说 ...
- 关于JS中变量提升的规则和原理的一点理解（二）
上篇文章中讲到变量提升和函数提升的先后顺序时蒙了,后来去查了一下资料,特别整理一下. 在<你不知道的JavaScript(上卷)>一书的第40页中写到:函数会首先被提升,然后才是变量. 书 ...
- 天气类App原型制作分享-ColorfulClouds
ColorfulClouds是一款界面精美的天气预报App,它可以准确预报降雨量.污染程度等.这款App最美的是它的首页天气插画,扁平精美,同时配上了适当的动效,把普通的天气变得漂亮有趣,十分吸引眼球 ...
- 1492: [NOI2007]货币兑换Cash
Description 小Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券(以下简称A券)和 B纪念券(以下 简称B券).每个持有金券的顾客都有一个自己的帐户.金券的数目可以是一个 ...
- cin与cout详解
输入和输出并不是C++语言中的正式组成成分｡C和C++本身都没有为输入和输出提供专门的语句结构｡输入输出不是由C++本身定义的,而是在编译系统提供的I/O库中定义的｡C++的输出和输入是用" ...
- c++(线性堆栈)
前面我们讲到了队列,今天我们接着讨论另外一种数据结构:堆栈.堆栈几乎是程序设计的命脉,没有堆栈就没有函数调用,当然也就没有软件设计.那么堆栈有什么特殊的属性呢?其实,堆栈的属性主要表现在下面两个方面: ...
- .NET MongoDB Driver GridFS 2.2原理及使用示例
一.API解读 1 GridFSBucketOptions 1)public string BucketName { get; set; } 获取或设置bucket名称 2)public int Ch ...