<style type="text/css">
*{
margin: 0;
padding: 0;
}
#text{
width: 300px;
height: 30px;
}
ul {
width: 302px;
border: 1px solid #ddd;
border-top:0;
display: none;
}
ul li {
list-style: none;
font-size: 12px;
font-family: "微软雅黑";
height: 20px;
line-height: 20px;
}
ul li a{
text-decoration: none;
color: #000;
display: block;
}
ul li a:hover{
background: red;
color: #fff;
}
</style>
</head>
<body>
<input type="text" id="text" />
<ul id="list"></ul>
<script type="text/javascript">
var oTxt = document.getElementById("text");
var oUl = document.getElementById("list");
oTxt.onkeyup = function(){
var val = oTxt.value;
var oScript = document.createElement('script');
oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&cb=hhl";
document.body.appendChild( oScript );
document.body.removeChild( oScript );
}
function hhl( data ){
var str = '';
for( var i=0;i<data.s.length;i++ ){
str += '<li><a href="https://www.baidu.com/s?wd='+data.s[i]+'">'+data.s[i]+'</a></li>';
}
oUl.innerHTML = str;
oUl.style.display = 'block';
}

</script>
</body>

原生JS模拟百度搜索关键字与跳转的更多相关文章

  1. 原生JS实现百度搜索功能

    今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html> <head> <meta charset= ...

  2. JS——模拟百度搜索

    注意事项: 1.for循环移除子节点时,其长度是变化的 2.在文档流中,input.img.p等标签与其他标签有3px的距离,利用左浮动,可以消除3px距离 3.背景图片定位时,第一个值是x轴方向的值 ...

  3. python--selenium简单模拟百度搜索点击器

    python--selenium简单模拟百度搜索点击器 发布时间:2018-02-28 来源:网络 上传者:用户 关键字: selenium 模拟 简单 点击 搜索 百度 发表文章摘要:用途:简单模拟 ...

  4. Splinter学习－－初探1，模拟百度搜索

    Splinter是以Selenium, PhantomJS 和 zope.testbrowser为基础构建的web自动化测试工具,基本原理同selenium 支持的浏览器包括:Chrome, Fire ...

  5. JS 实现百度搜索功能

    今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  6. JavaScript-dom3 json_str dom元素控制 模拟百度搜索

    访问关系-封装代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  7. JS---DOM---案例：模拟百度搜索框

    模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...

  8. js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  9. asp.net mvc 模拟百度搜索

    页面代码: <td><span>*</span>车牌号码:</td> <td> <div id="search"& ...

随机推荐

  1. redis从入门到

    下载 首先我们要到GitHub(https://github.com/MicrosoftArchive/redis/releases)上下载Source code (tar.gz) 上传到Linux上 ...

  2. 卷积神经网络的一些经典网络2（Inception）

    在架构内容设计方面,其中一个比较有帮助的想法是使用1x1卷积.1x1卷积能做什么? 对于6x6x1的通道的图片来说,1x1卷积效果不佳,如果是一张6x6x32的图片,那么使用1x1卷积核进行卷积效果更 ...

  3. 极速下载百度网盘-吴水成老师的-dubbo课程

    极速下载百度网盘-吴水成老师的-dubbo课程,极速下载百度网盘-吴水成老师的-dubbo课程,极速下载百度网盘-吴水成老师的-dubbo课程,极速下载百度网盘-吴水成老师的-dubbo课程 先看主目 ...

  4. Html5 监听拦截Android返回键方法详解

    浏览器窗口有一个history对象,用来保存浏览历史. 如果当前窗口先后访问了三个网址,那么history对象就包括三项,history.length属性等于3. history对象提供了一系列方法, ...

  5. TCP三次握手详解及释放连接过程

    TCP在传输之前会进行三次沟通,一般称为"三次握手",传完数据断开的时候要进行四次沟通,一般称为"四次挥手". 两个序号和三个标志位: (1)序号:seq序号, ...

  6. Redis事务管理

    用过其他关系型数据库(比如msql)的肯定都指定,在关系型数据库里面的事务可以保证多个命令操作要么同时成功,要么同时失败.并且在执行事务的时候,可以有隔离级别. 但是在Redis中的事务,只是保证事务 ...

  7. [NOI 2014]动物园

    Description 题库链接 \(t\) 组询问.每组询问给出一个字符串 \(S\) .要求求出一个 \(num\) 数组一一对于字符串 \(S\) 的前 \(i\) 个字符构成的子串,既是它的后 ...

  8. [HNOI 2004]敲砖块

    Description 在一个凹槽中放置了 n 层砖块.最上面的一层有n 块砖,从上到下每层依次减少一块砖.每块砖都有一个分值,敲掉这块砖就能得到相应的分值,如下图所示. 14 15 4 3 23 3 ...

  9. [HNOI2010]弹飞绵羊

    Description 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装置 ...

  10. NOIP 2013

    Prob.1 转圈游戏 找到循环节,然后快速幂.代码: #include<cstdio> #include<cstring> #include<iostream> ...