html设置一个搜索引擎,零基础打造一款属于自己的网页搜索引擎
【一、项目准备】
浏览器: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 点击后立即刷新
【三、项目总结】
总的来说,对于初学者小白是个很不错的练手项目,希望大家能从中有所收获。
html设置一个搜索引擎,零基础打造一款属于自己的网页搜索引擎相关推荐
- HTML5编写百度搜索网页,零基础打造一款属于自己的网页搜索引擎
[前言] 在说这个之前,想必大家应该都比较了解搜索引擎了,它就是通过用户在浏览器输入框中输入文本,从而显示一些结果,你觉得哪项符合你要搜索的内容,你就点击哪项. [一.项目准备] 浏览器:360浏览器 ...
- Python从编程零基础打造一款微信聊天自动回复机器人
本教程的作用 零基础手把手教你打造一款微信自动回复机器人,零基础! 操作流程: 第一步:安装python环境,下载链接,下载好,一路next,默认安装. 第二步:打开命令行,(快捷键win(那个键上有 ...
- 如何零基础制作一款自己的游戏!(一)
如何零基础制作一款游戏(一) 文章目录 如何零基础制作一款游戏(一) 前言 一.软件下载以及创建工程 二.使用步骤 1.进入工程 2.设置更改 3.更改界面 4.脚本更改 5.下载插件 6.如何设置障 ...
- 专转本计算机一个月零基础,距离2019年专转本考试越来越近,可我还是零基础怎么办?...
原标题:距离2019年专转本考试越来越近,可我还是零基础怎么办? 5月初就已经正式立夏 接着挺过了两天阴雨,天气又渐渐热起来了 时间眨眼间消失,2018年竟然只剩下一半的时光 转本的事情拖了一年,又拖 ...
- 搜索引擎优化基础,第 1 部分: 提高站点在搜索引擎中的排名
运用白帽技术实现有机 SEO L. Jennette Banks (ljbanks@us.ibm.com), 搜索引擎优化专家, IBM 作为一名 Web 站点开发人员,使您的 Web 站点得到搜索引 ...
- 新手必备 零基础打造 全屏海报!让你的店铺更加专业
前言: 我想每位掌柜都希望自己的店铺拥有大气非凡的全屏海报!因为它衬托出了店铺本身的专业,提升了店铺的形象!我在学习安装全屏海报的时候,没有找到一份真正的教程,很多小的细节也没有专门的标注,让我走了不 ...
- python微信小程序实例制作入门_python flask零基础打造微信小程序实战教程
资源目录: ├─python3+flask │ ├─第1章 介绍 │ └─1-1 导学--Python Flask 构建微信小程序.mp4 │ ├─第2章 微信小程序介绍 │ ├─2-1 小程序是什么 ...
- 爱奇艺的LOGO是怎么设置的呢-零基础学平面设计
爱奇艺在成立十二周年之际 发布全新品牌Logo 破框而出:科技无界,创意无限 新logo取消了「屏幕框」 以纯文字展示 开放舒展更加直观活力 识别度也强了 传递出爱奇艺打破常规 追求极致体验输出不同文 ...
- 零基础开发一款微信小程序商城
一个朋友问我能不能帮忙做个商城?我一个完整网页都写不出的 菜鸟程序员,我该怎么拒绝呢?好吧,看在小程序这么火的形势下,我还是答应了!找了个开源项目,差不多花了三天时间搞定. 主要是讲一个开源的微信小程 ...
- 零基础学python裴帅帅_人工智能时代,爬虫如此简单。
但我们伟大的苹果之父史蒂夫·乔布斯说,「每个人都应该学习编程,因为它教会你思考的方式」. 同时,英国牛津大学研究称,未来20年英国35%现有工作将自动化. 日本研究人员称,在未来的十到二十年之,日本将 ...
最新文章
- 利用策略模式结合alibaba/alpha框架优化你的图片上传功能
- python实现图的数据存储_Neo4j推出基于Python的嵌入式图数据存储
- 对于AES和RSA算法的结合使用以及MD5加盐注册登录时的密码加密
- hal 双串口同时接收丢失数据_【STM32Cube_06】使用USART发送和接收数据(查询模式)...
- 空间统计分析_CDA 数据分析师 Level 1 备考系列之推断性统计分析概述
- 拳王公社:缺流量难变现?文库引流让你0成本可获5000精准粉!
- Android逆向基础笔记—Android中的常用ARM汇编指令
- cad文件格式(dwg、dxf、dwf、dws等)转其他格式(svg、,tiff、jpej、png、xml、pdf等)的四种方式(java)
- jsp教师信息管理系统
- 每日工作问题记录总结(好习惯 打卡2/?)
- 东京喰种语录(节选)
- md文件如何打开,如何转html(无需破解)typora下载
- 在php内乱码如何动态的进行解决掉
- 《新理解矩阵1》:矩阵是什么?
- 贾俊平《统计学》第七章知识点总结及课后习题答案
- .NET C# winform窗体假死
- 群晖 NAS DS218j的优秀与缺憾
- navicat premium连接数据库出现2059错误
- 使用AFNetworking进行网络状态的监测
- 【java-Date】