HTML5编写百度搜索网页,零基础打造一款属于自己的网页搜索引擎
【前言】
在说这个之前,想必大家应该都比较了解搜索引擎了,它就是通过用户在浏览器输入框中输入文本,从而显示一些结果,你觉得哪项符合你要搜索的内容,你就点击哪项。
【一、项目准备】
浏览器:360浏览器
编辑器:Sublime Text 3
插件:Jquery-3.2.1.Min.Js
【二、项目实现】
由于是要实现一个网页搜索引擎,所以我们需要借用网页三剑客(Html+Css+Javascript),然后实现这一功能。
1.打开百度分析网页结构
我们可以先看看百度的搜索引擎:
可以看到,这个搜索框的部分设置,比如关闭自动完成功能。然后我们在随便搜索内容来查看它的变化:
可以看到某些我们查询的关键字,于是我们便发现了请求规律:
https://www.baidu.com/s?+查询字符参数
这就构成了我们的一个完整的get请求,而且这里面有很多关键字参数可以省略掉,只需要保留重要的一部分就好了。于是,经试验,得出如下结论:
https://www.baidu.com/s?wd=keyword
这个才是请求的接口地址,只需将keyword参数替换为任意搜索关键字即可实现查询并跳转到相应结果页面。
2.编写Html输入框,搜索按钮
看过之前写的Html系列的文章,你将不再对此感到困惑。
*{ 内外边距初始时为0
margin:0;
padding:0
}
input{
width:300px;
height:30px
}
span{
position:absolute; 绝对定位
background-color:red; 背景颜色
border:1px solid gray; 边框设置
width:60px;
height:32px;
text-align:center 文字位置
}
span:hover{ 鼠标悬停时的样式
background-color:blue
}
文本框
search 搜索按钮
编写完成后进入浏览器查看,即可看到:
可以看到,已经有点浏览器搜索框的意思了。
3.导入Jquery插件
4.编写js脚本
这个是重中之重,打开浏览器,network,继续分析:
可以看到搜索结果就在里面。然后打开这个请求的url地址,经过多次实验,发现就只有图中标记的参数有变化:
所以我们可以得出结论,我们只需要改变这两个值即可。
1).创建删除脚本
于是我先创建一个脚本标签,不用它的时候随时可以清除,避免占用内存,导致页面打开迟缓,性能降低:
var script=document.createElement('script'); 创建script的标签
script.id='jsonp'; 设置id为jsonp
script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd; 设置它的地址
document.body.appendChild(script); 添加script元素到body中
然后等它不用了,随时将它删除:
var script=document.createElement('script'); 创建script的标签
script.id='jsonp'; 设置id为jsonp
script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd; 设置它的地址
document.body.appendChild(script); 添加script元素到body中
2).生成选项下拉菜单
我们在浏览器可以看到,只要一输入文本,它就会弹出对应的选项让我们选择,那么这是如何办到的了?
function getlist(wd){ /*获取下拉列表*/
var script=document.createElement('script'); /*创建script的标签*/
script.id='jsonp'; /*设置id为jsonp*/
script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd; /* 设置它的地址*/
document.body.appendChild(script); /*添加script元素到body中*/
}
function getData(data){ /*获取数据*/
var script=document.querySelector('#jsonp'); /*选择id为jsonp的元素*/
script.parentNode.removeChild(script); /*从这个元素的父元素中删除这个元素*/
$('ol').html(''); /* 设置有序列表的值为空*/
var da=data.g; /* 获取搜索的结果*/
if(da){ /*结果存在的话就将结果放到li标签中*/
da.forEach(function(item,index){
$('
'+item.q+'').appendTo('ol');
})
}
}
/* 判断键盘是否按下*/
$('input:text').keyup(function(){
var wd=$(this).val(); /* 输入框的值*/
if(wd==''){ /*如果值是空,那么就隐藏,否则显示*/
$('ol').css('display','none');
$('ol').css('zIndex',-10);
}else{
$('ol').css('display','block');
$('ol').css('zIndex',20);
}
getlist(wd);
});
可以看到,搜索结果已经出来了,而且有序列表下的"li"标签也都对应的生成了。
3).给选项标记序列
我们可以看到,结果终于出来,但是我想给它个序列号,这样就可以知道搜索结果有多少个了。要设置的标记方式有很多种,可以以数字开头,也可以是大小写字母或者罗马时间。在这里我选择数字,很简单。
终于非常完美的实现了这一功能,是不是很惊艳了,赶快去试下吧。
4).搜索刷新
看到这里相信大家应该都知道这个功能已经算是完成了,我们只需要随便点击哪个li标签都可以访问到相应的页面。于是,我决定添加一个刷新的功能,属于重连服务器的那种刷新:
search 点击后立即刷新
【三、项目总结】
总的来说,对于初学者小白是个很不错的练手项目,希望大家能从中有所收获。
HTML5编写百度搜索网页,零基础打造一款属于自己的网页搜索引擎相关推荐
- Python从编程零基础打造一款微信聊天自动回复机器人
本教程的作用 零基础手把手教你打造一款微信自动回复机器人,零基础! 操作流程: 第一步:安装python环境,下载链接,下载好,一路next,默认安装. 第二步:打开命令行,(快捷键win(那个键上有 ...
- 【飞桨/百度领航团/零基础Python】学习心得
[飞桨/百度领航团/零基础Python]学习心得 课程链接:https://aistudio.baidu.com/aistudio/course/introduce/7073 初识python Pyt ...
- 零基础Unity做一个中秋诗词鉴赏网页,提前祝您中秋快乐!(DoTween动画 | WebGL视频 | 大文件上传GitHub)
零基础Unity做一个中秋诗词鉴赏网页,提前祝您中秋快乐! 前言 一,环境搭建 1.1 安装Unity 1.2 添加WebGl模块 二,开发项目 2.1 导入插件 2.2 项目搭建 2.3 逻辑处理 ...
- 如何零基础制作一款自己的游戏!(一)
如何零基础制作一款游戏(一) 文章目录 如何零基础制作一款游戏(一) 前言 一.软件下载以及创建工程 二.使用步骤 1.进入工程 2.设置更改 3.更改界面 4.脚本更改 5.下载插件 6.如何设置障 ...
- python基础教程视频教程百度云-Python零基础入门学习视频教程全42集百度云网盘下载...
课程简介 Python零基础入门学习视频教程全42集百度云网盘下载 课程目录 042魔法方法:算术运算 041魔法方法:构造和析构 040类和对象:一些相关的BIF 039类和对象拾遗 038类和对象 ...
- python基础教程百度云-Python零基础入门学习视频教程全42集百度云网盘下载
课程简介 Python零基础入门学习视频教程全42集百度云网盘下载 课程目录 042魔法方法:算术运算 041魔法方法:构造和析构 040类和对象:一些相关的BIF 039类和对象拾遗 038类和对象 ...
- java 百度爬虫_零基础写Java知乎爬虫之先拿百度首页练练手
上一集中我们说到需要用Java来制作一个知乎爬虫,那么这一次,我们就来研究一下如何使用代码获取到网页的内容. 首先,没有HTML和CSS和JS和AJAX经验的建议先去W3C(点我点我)小小的了解一下. ...
- python爬虫百度地图_零基础掌握百度地图兴趣点获取POI爬虫(python语言爬取)(基础篇)...
实现目的:爬取昆明市范围内的全部中学数据,包括名称.坐标. 先进入基础篇,本篇主要讲原理方面,并实现步骤分解,为python代码编写打基础. 因为是0基础开始,所以讲得会比较详细. 如实现目的所讲,爬 ...
- html5该怎么样学习?零基础入门HTML5学习路线
纵观近几年HTML5的发展可以看出,HTML5开发持续上涨,腾讯.微软.谷歌等国际互联网企业都将HTML5的研发与使用放在了重要的地位.目前全球有超过十亿台手机浏览器支持HTML5,而微信小程序的开放 ...
最新文章
- 保障数据安全,强调科技向善,旷视发布《人工智能应用准则》
- 100 行代码透彻解析 RPC 原理
- 人会成为虚拟现实中的“机器人代码”吗?
- python requests 使用代理
- mysql 计算两个日期之间的天数
- 如何把后台返回数据的根据某个选项去重新排序?
- 用php实现动态产生xml文件以及从xml文件中抽取数据转化成html的
- 【转】符串搜索工具及XenoCode字符串自动解密工具
- java 获取oracle表结构_Java导出oracle表结构实例详解
- Navicat12及以上才能显示json数据
- seaborn-heatmap
- HDU1160 FatMouse's Speed —— DP
- html 中全角波浪线,中间波浪怎么打出来,靠上的波浪符号怎么打
- 抗洪救灾,共克时艰,城联优品捐赠10万元爱心物资驰援英德
- 广发卡知识知多少?不懂来看,不然吃亏了!
- 网管员必知:常用电脑密码破解(转)
- 哪些5G芯片和5G模组已经问世?| 截止至2020年Q1
- 怎样用一台手机做自媒体?
- android 手机开机启动,手机怎么开机启动项 手机开机启动项方法【详解】
- openresty mysql 批量_OpenResty负载均衡MySQL
热门文章
- RAC 网络心跳 磁盘心跳 本地心跳 控制文件磁盘心跳
- 关于qq邮箱 该文件已达到200次的下载限制,您已不能下载该文件 的问题处理
- 0415学习笔记:3决策树
- 利用TF_IDF算法计算两英文文章的文本相似度 C++实现
- 《三体》里的超级计算机,我们今天能造出来吗?
- 七、使用OpenCV徒手实现:RGB转HSI,并提取红色
- shell脚本编写创建多层目录,判断目录是否存在,存在则删除并且给文件赋予权限
- 基于蒙特卡洛法的规模化电动汽车充电负荷预测(PythonMatlab实现)
- python对seo有什么用_pythonseo-python对于做SEO主要有什么作用
- java解决数独_Java解决“数独”之三