csdn很少上线,经常在掘金摸鱼,本文掘金链接https://juejin.cn/post/7058602557987356708
言归正传:
为什么要做这个小案例呢?
首先我有极度严重的强迫症,对于设备交互界面的追求是越整洁越好,另外由于我的专业原因,需要经常不断地跨平台搜索各种资料,所以我作做了一个结合百度、bing、Yandex、掘金、CSDN等于一体的搜索栏。
看看百度的搜索页
文章图片
百度算是好的,有的搜索引擎一打开全是广告和弹窗,比如QQ浏览器。。。。
为了还自己一个干净的界面,同时提高搜索效率,于是我自己做了一个(下图)
我知道有很多大佬做过类似的浏览器插件,但是我做的这个是一个纯网页的,不需要大家安装,也没太多花里胡哨的内容(更轻便)
实现原理
主要技术路线:网页页面跳转window.location.href
思路:
1、怎么将输入的内容提交到指定的平台 百度为例:当我们搜索“你好”时
文章图片
地址栏地址:https://www.baidu.com/s?wd=你好
https是通信协议
【javascript|自己用js做一个搜索栏,超级简单】www.baidu.com是网址(域名)
那么后的s?wd=你好 是什么意思呢?我们不妨将浏览器的地址改为https://www.baidu.com/s?wd=世界
原来wd=
后面的字符对应的是我们需要搜索的内容,那我不就可以利用js将搜索栏的内容获取到后,做一个拼接,然后使用js跳转到拼接好的链接页面,就可以现实自制带有搜索功能的搜索栏了吗?
2、找规律 有了上述的理论基础,尝试各个平台搜索方式后发现其实现方式与百度类似,但是其具体的实现方式是有区别的具体如下
平台 | 域名 | 搜索字段 |
---|---|---|
百度 | https://www.baidu.com/s | ?wd= |
必应 | https://cn.bing.com/search | ?q= |
简书 | https://www.jianshu.com/search | ?q= |
CSDN | https://so.csdn.net/so/search | ?q= |
爱给网 | https://www.aigei.com/s | ?q= |
文章图片
3、写代码 我认为这个案例的html和js代码都很重要,所以重点分享这两个文件
>
if (window.navigator.userAgent.match(/Android|iPhone|iPad/)) {
window.location.href = 'https://www.it610.com/article/m.index.html';
} else {
console.log('pc端');
}
QHX-聚合搜索 - 锐客网
文章图片
name="" id="">
src="https://www.it610.com/article/js/index.js">
//获取搜索按钮
const btn = document.querySelector('.label');
//获取下拉框,方便后期判断用户选择的搜索平台
const point = document.querySelector('select');
//获取input框
const texts = document.querySelector('#text');
//将所有平台的搜索关键字端,存入数组
const arr = ['wd', 'q', 'text', 'query', 'w', 'keyword', 'm=Index&a=fenlei&k'];
//搜索按钮被点击以后要做的事情
btn.onclick = function() {
//获取下拉框用户选中的内容
const p = point.value;
//获取输入框中,用户输入放入内容
const text = texts.value;
//声明一个空字符串
let str = '';
//以下所有的if语句是用来判断下拉框选项中是否包含平台域名关键字的,如果有
if (p.includes('baidu')) {
//就拼接?+搜索关键字段+ ‘=’ + 用户搜索内容
//例如这里是百度,那么拼接的结果就是?wd=你好
str = '?' + arr[0] + '=' + text;
}
if (p.includes('bing')) {
str = '?' + arr[1] + '=' + text;
}
if (p.includes('yandex')) {
str = '?' + arr[2] + '=' + text;
}
if (p.includes('juejin')) {
str = '?' + arr[3] + '=' + text;
}
if (p.includes('cnblogs')) {
str = '?' + arr[4] + '=' + text;
}
if (p.includes('jianshu')) {
str = '?' + arr[1] + '=' + text;
}
if (p.includes('csdn')) {
str = '?' + arr[1] + '=' + text;
}
if (p.includes('yuansu')) {
str = '?' + arr[6] + '=' + text;
}
if (p.includes('aigei')) {
str = '?' + arr[1] + '=' + text;
}
if (p.includes('bilibili')) {
str = '?' + arr[5] + '=' + text;
}
if (p.includes('haiantv')) {
str = '/' + text + '/';
alert('该搜索比较缓慢,请您耐心等待');
}
console.log(p + str);
//最后我们利用页面跳转,跳转到指定的平台域名+搜索字段,就可以实现了
window.location.href = https://www.it610.com/article/p + str;
}//这里是判断用户选中的是不是觅元素,如果是,就要提示用户,需要输入拼音搜索
point.onchange = function() {
const p = point.value;
if (p.includes('yuansu')) {
texts.setAttribute('placeholder', '觅元素搜索请输入拼音,如:你好输入nihao');
}
}//当用户点击确定(enter)键后,让搜索按钮模拟被点击
document.onkeyup = function(e) {
if (e.keyCode == 13) {
btn.click();
}
}//如果是pc端,就启动背景切换
if (window.navigator.userAgent.match(/Windows/)) {
document.body.background
let index = 1;
setInterval(() => {
index++;
if (index > 5) {
index = 1;
document.body.style.background = `url(../images/beijing${index}.jpg)no-repeat center center/100% 100%`;
} else {
document.body.style.background = `url(../images/beijing${index}.jpg)no-repeat center center/100% 100%`;
}
}, 10000);
}
以上就是本文的全部内容。
本文掘金链接https://juejin.cn/post/7058602557987356708
推荐阅读
- vue|Vue | 原生audio样式不好看,自己写一个简易的音乐播放控件,实现播放暂停可拖动
- 二分法的左右边界
- #|Java 根据模板文件生成新的PPT
- Golang|Golang 小数操作之判断几位小数点与四舍五入
- Golang|Golang []int []string 互转与判断字符是否在数组中
- 博文视点IT荐书吧|迈向云原生(名企FreeWheel应用架构演进)
- JS|深拷贝浅拷贝的区别(如何实现一个深拷贝?)
- JS|说说JavaScript中的数据类型
- C++学习笔记|C++内存管理笔记