JS 实现百度搜索功能
今天我们来用JS实现百度搜索功能,下面上代码:
HTML部分:
<!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><link rel="stylesheet" href="css/baidu.css" /><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中。
今天就分享到这里~
转载于:https://www.cnblogs.com/houxiaowei/p/8398014.html
JS 实现百度搜索功能相关推荐
- 原生JS实现百度搜索功能
今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html><head><meta charset=&q ...
- html搜索框如何加下拉框,js实现带搜索功能的下拉框
本文实例为大家分享了js实现带搜索功能的下拉框,供大家参考,具体内容如下 1.介绍 在实现下拉框的时候,如果用select+option可以在满足pc端的需求,但如果需应用到手机端,由于select的 ...
- html怎么创百度搜索框,JS实现百度搜索框
本文实例为大家分享了JS实现百度搜索框的具体代码,供大家参考,具体内容如下 实现原理 向输入框动态输入时关键词,将当前关键词作为问号参数后面的值,因为要跨域使用百度的接口,所以通过 JSONP 跨域创 ...
- html+js仿百度搜索框,点击和回车跳转百度搜索
html+js仿百度搜索框,点击和回车跳转百度搜索 代码 <!DOCTYPE html> <html lang="en"> <head>< ...
- JS模拟百度搜索框和选项卡
练习1 实现搜索框内,输入相关数字,在下方显示相关内容,模拟百度搜索,详细代码如下: <!DOCTYPE html> <html lang="en">< ...
- 前端自动化测试——百度搜索功能实战演示
开发环境 win10.pycharm.python3.8 代码(注:webdriver 在py脚本相同目录下) import allure from selenium import webdriver ...
- js 获取百度搜索关键词的代码
有可能有时候我们会用到在百度搜什么关键词进来我们的网站的,所有我们又想拿到用户搜索的关键词. 这是我研究了半天所得出的办法.话不多说直接贴代码 <script>function query ...
- python爬虫案例-跳过百度验证,接口调用实现百度搜索功能
需求背景:我们有自己的平台,但是希望在我们的平台上面想要实现一个百度搜索的接口,输入想要搜索的内容,模拟百度搜索,将返回的内容再展现在我们自己的平台中,提供给用户查看. # -- coding:utf ...
- 搭建behave-po设计模式-allure报告组合的bdd测试框架,以百度搜索功能为例
网上有些内容不全面,自己完善了一下 需要python3.7.pycharm,用pip安装behave.selenium.allure-behave 1.po模式的目录结构 2.一切的开始environ ...
最新文章
- 部署通用基础设施, 满足顶级 SLA 要求
- Java NIO(十五) Path 的用法
- 每日一皮:这个不要轻易尝试,执行有生命危险
- sql日期相关函数的使用方法
- Spring Boot Admin –用于管理Spring Boot应用程序的Admin UI
- 常见光纤收发器组网方式介绍
- 帝国CMS7.5响应式后台美化模板 支持GBK+UTF
- 使用jpa控制器层如何编写_用错误的方式编写Kubernetes控制器仍然有用
- Python进阶丨如何创建你的第一个Python元类?
- Yii2性能优化之:缓存依赖
- 计算机二级 Excel常用函数公式总结
- python爬虫——爬起点中文网小说
- Adobe Premiere基础-编辑素材文件常规操作(脱机文件,替换素材,素材标签和编组,素材启用,便捷调节不透明度,项目打包)(十七)
- 树莓派机器人小车(创乐博)修炼指南(一)
- 基于蓝牙5(BTIoT-5)的物联网架构
- muduo源码学习 Day03
- 网校搭建9:微信登录
- 智能家用洗地机哪个牌子好?实际好用的家用洗地机推荐
- kotlin常用语法扫盲及开发注意点,勿错失(持续更新)
- jquery如何判断浏览器是否是ie6
热门文章
- Python制作音乐播放器,帮你随时放飞心情~
- frp实现内网穿透(linux穿透至windows)
- java和javac版本不一致(三种解决方法)
- ansys的kbc_ANSYS单调加载、滞回曲线
- 从1亿美元到10亿美元,博世/大陆看到的自动驾驶量产技术趋势
- 远程控制木马偷窥者的源代码 - -兰大开源社区blog
- SVN ubuntu下客户端神器RabbitVCS
- 跨越行业壁垒:金融校对软件在跨国金融业务中的应用
- 商汤“变法”:推中小学AI教材,mini自驾车,要打造AI时代的「清明上河图」...
- 安装SQL2000系统提示文件挂起的解决办法