写了一个给浏览器主页特别设置的自定义搜素引擎集合，记忆和自己配置多种搜素引擎、黑暗模式、自动删除输入框的操作历史、友情提示、自适应不屏幕设备和不同系统设备等。
一些功能可能写的不够简洁，但是已经封装了，没有多少绒余。
思路请看代码注释。
=2020-11-17更新了功能：美化了细节，删除多余代码，优化了若干使用体验=
-
<!--
404 `` 404
404 404
404 404
404 404
404 Search 404
404 404
404 404
404 404 QQ
404 __ 404 26
52
33
57
96
常用404，生活不路痴。
支持Android 5.1+、iOS 10.3.3+； 不再支持IE；
访问示例：https://cdnaliyun.oss-cn-hangzhou.aliyuncs.com
使用：①页面连续点击4次可切换至纯黑模式；②按Enter或回车即可执行搜索；③页面不记录任何历史记录。
-->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Loading...</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<link href="//cdnaliyun.oss-cn-hangzhou.aliyuncs.com/icon/favicon.ico" rel="apple-touch-icon" sizes="180x180">
<link href="//cdnaliyun.oss-cn-hangzhou.aliyuncs.com/icon/favicon.ico" rel="apple-touch-icon" sizes="120x120">
<link href="//cdnaliyun.oss-cn-hangzhou.aliyuncs.com/icon/favicon.ico" rel="apple-touch-icon" sizes="114x114">
<link href="//cdnaliyun.oss-cn-hangzhou.aliyuncs.com/icon/favicon.ico" rel="apple-touch-icon">
<link rel="shortcut icon" href="//cdnaliyun.oss-cn-hangzhou.aliyuncs.com/icon/favicon.ico" type="image/x-icon" />
<style>
.body{width: 100%; min-width: 320px;height: 100%;margin: 0;padding: 0;background: #f1f1f1; color: #f5f5f5; font-family: "PT Serif", Georgia, serif !important;}
.content{width: 100%; position: fixed; z-index: 100; left: 0; right: 0; top: 0;margin-right: auto; margin-left: auto;}
.input-div{background: transparent;border-radius: 40px;width: calc(100% - 20px);margin-top: calc(10% + 20px);height: 50px; min-width: 300px; max-width: 640px; margin-left: auto; margin-right: auto;position: relative;}
.select{height: calc(42px + 2px);width: 125px;font-size: 14px;color: #0078fe;letter-spacing: 1px;cursor: pointer;font-weight: 600;overflow: hidden;padding: 0 20px 0 8px;float: left;outline: none;border: 1px solid #f5f5f5;border-radius: 21px;background-color: rgba(255, 255, 255, 0.8); text-indent: 0px;box-shadow: 0 0 10px rgba(0,0,0,0.2);text-align: center; appearance: none;-webkit-appearance:none;-moz-appearance:none;}
.input{height: 42px; line-height: 42px;width: calc(100% - 156px);letter-spacing: 1px;margin-left: 5px;font-size: 16px;color: #000000;border: 1px solid #f5f5f5;padding: 0 12px;float: left;border-radius: 21px;background: rgba(255, 255, 255, 0.8);box-shadow: 0 0 10px rgba(0,0,0,0.2); }
.search-style{}
.clear{clear: both;}
.hide{display: none !important;}
.show{display: block;}
.input:focus {outline:none;border: 1px solid #0078fe;}
.select:focus {outline:none;border: 1px solid transparent;}
.input-div:after{
content: "▼";
position: absolute;
left: 90px;
top: 0;
z-index: 1;
height: 44px;
width: 44px;
line-height: 47px;
pointer-events: none;
box-sizing: border-box;
font-size: 12px;
text-align: center;
border-radius: 44px;
background: transparent;
}
.input-div-blur:after {
color: rgba(117,117,117,0.6);
transition: transform 0.5s;
transform: rotateZ(0deg);
}
.input-div-focus:after {
color: rgba(245,245,245,0.8);
transition: transform 0.5s;
transform: rotateZ(90deg);
}
.liner-color{background: linear-gradient(to right, red , blue );color: white;}
.bg-black{background: #1c1c1c !important;}
.bg-light{background: #f1f1f1 !important;}
.loading-div{position:fixed;z-index:201901;top:0;left:0;bottom:0;right:0;margin:auto;background:rgba(232,232,232,0.4)}.clear{clear:both}
.select-none{user-select: none;}
.click{cursor: pointer;user-select: none;}
.click:active{opacity: 0.8;}
.search-btn-div{padding: 30px 0px 10px 0px;text-align: center;}
.search-btn-center{width: 320px;margin-left: auto;margin-right: auto;}
.search-btn-style{font-size: 16px;border-radius: 40px;color: rgba(117,117,117,1);background: rgba(255, 255, 255, 0.7);display: block;width: calc(100%/3 - 20px - 2px);line-height: 38px;text-align: center;box-shadow: 0 0 10px rgba(0,0,0,0.1);float: left;margin-left: 10px;margin-right: 10px; border: 1px solid #f5f5f5;letter-spacing: 1px;}
.search-btn-style:hover{opacity: 0.8;}
.tips-div{font-size: 16px;color: #CD5C5C;height: 50px;text-align:center;line-height: 22px;padding: 10px 10px;}
.res-txt{height: 44px;overflow: hidden;}
.content-bg{position: fixed;z-index: 80;width: 100%;height: 100%;top: 0;left: 0;}
.zoom-80{
zoom: 0.8;
}
</style>
</head>
<body id="body" class="body">
<div class="content" id="content"></div>
<div class="content-bg" id="content-bg"></div>
<div class="loading-div clear" id="loading-div"></div>
</body>
<script title="页面数据参数">
const search_debug = false; // 调试日志，false关闭日志，true显示日志
const title = " | 简洁主页 | ggvs.org"; // 当前页面标题
const search = [ // 搜索引擎列表，分为移动和PC、前缀和后缀。自定义。
{
"name": "百度一下", // 引擎名称，可视5个字
"m-url": "https://m.baidu.com/s?ie=UTF-8&wd=", // 移动端，前缀
"pc-url": "https://www.baidu.com/s?ie=UTF-8&wd=", // PC端，前缀
"url_right": "", // 参数的固顶后缀
},
{
"name": "Google搜索", // 引擎名称，可视5个字
"m-url": "https://www.google.com/search?q=", // 移动端，前缀
"pc-url": "https://www.google.com/search?q=", // PC端，前缀
"url_right": "", // 参数的固顶后缀
},
{
"name": "Bing搜索",
"m-url": "https://www.bing.com/search?q=",
"pc-url": "https://www.bing.com/search?q=",
"url_right": "",
},
{
"name": "白嫖收费音乐",
"m-url": "https://www.hifini.com/search-",
"pc-url": "https://www.hifini.com/search-",
"url_right": "-1-1-1.htm",
},
{
"name": "白嫖Github",
"m-url": "https://github.com/search?&type=Repositories&q=",
"pc-url": "https://github.com/search?&type=Repositories&q=",
"url_right": "",
},
{
"name": "白嫖我的博文",
"m-url": "https://so.csdn.net/so/search/s.do?q=",
"pc-url": "https://so.csdn.net/so/search/s.do?q=",
"url_right": "&t=blog&u=weixin_41827162",
},
{
"name": "搜索城市天气",
"m-url": "http://wthrcdn.etouch.cn/weather_mini?city=",
"pc-url": "http://wthrcdn.etouch.cn/weather_mini?city=",
"url_right": "",
},
{
"name": "查询IPv4",
"m-url": "http://ip.tool.chinaz.com/",
"pc-url": "http://ip.tool.chinaz.com/",
"url_right": "",
},
{
"name": "域名SEO",
"m-url": "https://seo.chinaz.com/",
"pc-url": "https://seo.chinaz.com/",
"url_right": "",
},
{
"name": "域名Whois",
"m-url": "http://whois.chinaz.com/",
"pc-url": "http://whois.chinaz.com/",
"url_right": "",
},
{
"name": "菜鸟教程",
"m-url": "http://www.runoob.com/?s=",
"pc-url": "http://www.runoob.com/?s=",
"url_right": "",
},
{
"name": "知乎搜索",
"m-url": "https://www.zhihu.com/search?type=content&q=",
"pc-url": "https://www.zhihu.com/search?type=content&q=",
"url_right": "",
},
{
"name": "微博搜索🧣",
"m-url": "http://s.weibo.com/weibo/",
"pc-url": "http://s.weibo.com/weibo/",
"url_right": "",
},
{
"name": "CSDN博客",
"m-url": "https://so.csdn.net/so/search/s.do?q=",
"pc-url": "https://so.csdn.net/so/search/s.do?q=",
"url_right": "",
},
{
"name": "cnblogs博客",
"m-url": "https://zzk.cnblogs.com/s/blogpost?w=",
"pc-url": "https://zzk.cnblogs.com/s/blogpost?w=",
"url_right": "",
},
];
</script>
<script title="函数功能依赖">
// 调试日志
function console_log(txt){
search_debug === true ? console.info(txt) : "";
}
/*
* 实现自定义的N次连续点击
* many_click(_click_num, call_func)
* 必填：_click_num 点击次数 [1, 10]
* 必填：call_func 回调函数
* 选填：_id 是长按手势传入的目标标签id
* */
let click_before_time = 0;
let click_num = 0;
function many_click(_click_num, call_func, _id){
if (!call_func){console.info("many_click(_click_num, call_func)无回调函数"); return;}
if (_click_num === "long"){ /*实现长按*/
if(!_id){console.info("_id为必填。many_click('long', call_func, _id)"); return;}
long_press(_id, call_func);
return;
}
// 安全校验
if (typeof _click_num !== "number"){ console.info("many_click(_click_num, call_func)的点击次数为number类型"); return; }
// 处理click_num的新值情况
if(click_num === 0){
click_num = _click_num;
}else {
if (click_num < 1 || click_num > 10){ click_num = 1; } /*只准1击至10击，其他情况默认1击*/
}
// 处理点击之时差
let click_time = Date.parse(new Date())+(new Date()).getMilliseconds(); // 毫秒时间戳
if( (click_time - click_before_time) < 400 ){ // 下一次点击是否成功
click_before_time = Date.parse(new Date())+(new Date()).getMilliseconds(); click_num--;
}else{ // 第一次点击
click_before_time = Date.parse(new Date())+(new Date()).getMilliseconds();
if(click_num < _click_num){ /*清除历史不成功点击的参数*/
click_num = _click_num;
}
}
// N次成功点击后启用回调函数，并初始化click_num
if (click_num === 1){
call_func("回调函数不需要传参"); click_num = 0; /*初始化点击次数*/
}
}
/*
* 长按事件
* long_press(_id, call_func)
* */
function long_press(_id, call_func){
let timer = null;
_id.addEventListener("touchstart",function(){
timer = setTimeout(function () {
call_func(_id);
},1200); // 定义长按时间
});
_id.addEventListener("touchend",function(){
clearTimeout(timer);
});
}
//写入cookies
// time = 1*24*60*60*1000;
function setCookie(name, value, time) {
if (!time){
time = 100*24*60*60*1000; // 默认100天
}
var exp = new Date();
exp.setTime(exp.getTime() + time);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//读取cookies
function getCookie(name) {
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)){
return unescape(arr[2]);
} else{
return null;
}
}
//删除cookies
function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null) {
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
}
</script>
<script title="页面内容渲染">
const search_cookie_pre = "search_";
const search_eq = search_cookie_pre+"_eq";
let search_time_style = 0; // 自动校正iframe
let focus_time = 3*60*60*1000; // 保护用户输入框隐私，3h不聚焦删一次
let blur_time = 6*60*60*1000; // 保护用户输入框隐私，6h聚焦删一次
let dead_input_num = 0; // 自动初始化输入框
function set_search(val){ // 配置当前的搜索引擎
console_log("配置当前搜索引擎");
setCookie(search_eq, val, 30 * 24 * 60 * 60 * 1000);
for (let i = 0; i<document.getElementsByClassName("option").length; i++) {
document.getElementsByClassName("option")[i].removeAttribute("selected");
}
document.getElementsByClassName("option-"+val)[0].setAttribute("selected", "selected");
document.getElementsByTagName("title")[0].innerText = document.getElementsByClassName("option-"+val)[0].innerText+title;
}
function create_input(pre) { // 渲染模板
console_log("渲染模板数据");
document.getElementsByTagName("title")[0].innerText = title;
let content = document.getElementsByClassName("content")[0];
content.innerHTML = '<div class="input-div" id="input-div"><select class="select search-style select-none" id="select"></select><input type="text" value="" maxlength="100" id="input" class="input search-style" placeholder="'+ pre +'输入内容，按Enter搜索"/><div class="clear"></div></div><div class="search-btn-div" id="search-btn"></div><div class="res-div"></div>';
let append_tag = [];
for (let i = 0; i < search.length; i++){
let tag = '<option class="option option-'+i+'" value="'+i+'">'+ search[i]["name"] +'</option>';
append_tag.push(tag);
}
document.getElementsByClassName("select")[0].innerHTML = append_tag.join("");
document.getElementById("input-div").classList.add("input-div-blur");
let _eq = getCookie(search_eq);
if (_eq){set_search(_eq);}else {set_search(0);}
setTimeout(function () {
delete_loading();
write_tips_text('若浏览器阻止打开新标签，务必手动选择允许打开');
}, 300);
}
function dead_input(del_time) { // 处理清空用户输入的情况
try {
clearTimeout(dead_input_num);
console_log(dead_input_num+"-清除成功");
}catch (e) {
console_log(dead_input_num+"-timeout is none");
}
dead_input_num = setTimeout(function () {
create_input("重新");
console_log(del_time);
}, del_time);
console_log(dead_input_num);
}
function run_search(){ // 执行搜索
change_blur();
try {
clearInterval(search_time_style);
} catch (e) {
console_log("第一次进入页面是没有定时器的");
}
let _select = document.getElementById("select");
let engine = _select.options[_select.selectedIndex].value;
let _input = document.getElementById("input").value;
if (!_input.trim()) {
console_log("内容不能为空");
change_focus();
return;
}
let http_url = _input;
let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)+([A-Za-z0-9-~\/])/; // 至少是 http://a 这种格式
if(!reg.test(http_url)){
console_log("不是网址");
}else{
console_log("是网址");
window.open(http_url, "_blank"); // 搜索4/4
return;
}
let url_right = search[engine]["url_right"].trim(); // 参数固定后缀
let m_url = search[engine]["m-url"]+_input+url_right; // get，移动端
let pc_url = search[engine]["pc-url"]+_input+url_right; // get，PC端
let tab_url = "";
if (window.innerWidth > 640) {
write_tips_text("PC模式会自动打开新标签来展示搜索结果");
tab_url = pc_url;
}else {
// 操作iOS设备Bug情况
let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isAndroid === true || isiOS === false){ // android
tab_url = m_url;
console_log("Android");
}else if(isAndroid === false || isiOS === true){ // ios
console_log("iOS");
write_tips_text("iOS移动设备会自动打开新标签来展示搜索结果");
tab_url = m_url;
}else { // pc
tab_url = pc_url;
console_log("PC");
}
}
show_loading();
write_tips_text('已经在新标签打开了本次搜索结果');
change_blur(); // 主动退去键盘
setTimeout(function(){
console_log("打开新标签也买你");
window.open(tab_url, "_blank");
}, 100);
setTimeout(function () {
delete_loading();
}, 500);
}
(function () {
// 初始化页面输入框
create_input("");
// 初始化搜索按钮
document.getElementById("search-btn").innerHTML = '<div class="search-btn-center"><span class="search-btn-style history-btn-span click ">清 空</span><span class="search-btn-style color-btn-span click ">变 色</span><span class="search-btn-style search-btn-span click ">Enter</span><div class="clear"></div></div>';
// 各种按钮事件绑定
document.getElementsByClassName("input")[0].addEventListener("mouseover", function (e) {
console_log("鼠标over了输入框，输入框自动聚焦");
let that = this;
that.focus();
});
document.getElementById("select").onchange = function(e){ // 设置历史和当前选中的搜索引擎
console_log("选择搜素引擎");
let that = this;
set_search(that.value);
};
document.getElementById("input").onfocus = function(e){
console_log("监听输入框状态-onfocus");
document.getElementsByClassName("select")[0].classList.add("liner-color");
document.getElementById("input-div").classList.remove("input-div-blur");
document.getElementById("input-div").classList.add("input-div-focus")
dead_input(focus_time);
};
document.getElementById("input").onblur = function(e){
console_log("监听输入框状态-onblur");
document.getElementsByClassName("select")[0].classList.remove("liner-color");
document.getElementById("input-div").classList.remove("input-div-focus");
document.getElementById("input-div").classList.add("input-div-blur");
dead_input(blur_time);
};
//
document.onkeyup = function (event) { // Enter
console_log("按键盘enter进行搜素");
let _key = event.key;
if (_key === "Enter") {
run_search();
}
};
document.getElementsByClassName("search-btn-span")[0].addEventListener("click", function () {
run_search();
});
document.getElementById("content-bg").addEventListener("click", function () {
many_click(4, change_bg_color);
});
document.getElementsByClassName("color-btn-span")[0].addEventListener("click", function () {
console_log("color-btn-span");
change_bg_color();
});
document.getElementsByClassName("history-btn-span")[0].addEventListener("click", function () {
document.getElementById("input").value = "";
let now_url = window.location.href;
window.location.replace(now_url);
});
// 确定适应屏
window.onresize = function () {
let _width = window.innerWidth;
resize_width(_width);
};
let width = window.innerWidth;
resize_width(width);
})("用户操作");
/*
* 个性化颜色
* */
const bg_cookie = search_cookie_pre + "bg_color";
(function () {
let bg_color = getCookie(bg_cookie)*1;
console_log("默认色：亮，" + bg_color);
console_log(bg_color);
if (!bg_color && bg_color !== 0) { // 默认色：亮
setCookie(bg_cookie, 1);
document.getElementById("body").classList.remove("bg-black");
document.getElementById("body").classList.add("bg-light");
console_log("默认色：亮，" + bg_color);
}else {
console_log("设置色：" + bg_color);
if (bg_color === 0){ // 暗
document.getElementById("body").classList.remove("bg-light");
document.getElementById("body").classList.add("bg-black");
}else if (bg_color === 1) { // 亮
document.getElementById("body").classList.remove("bg-black");
document.getElementById("body").classList.add("bg-light");
}else{ // 亮
document.getElementById("body").classList.remove("bg-black");
document.getElementById("body").classList.add("bg-light");
console_log("亮2");
}
}
})();
function change_bg_color() {
if (document.getElementById("body").classList.contains("bg-black")){ // 亮
console_log("change_1");
document.getElementById("body").classList.remove("bg-black");
document.getElementById("body").classList.add("bg-light");
// 更新cookie
setCookie(bg_cookie, 1);
}else { // 暗
console_log("change_0");
document.getElementById("body").classList.remove("bg-light");
document.getElementById("body").classList.add("bg-black");
setCookie(bg_cookie, 0);
}
}
function change_focus(){
document.getElementById("input").focus();
}
function change_blur(){
document.getElementById("input").blur();
}
// 调整屏幕宽度变化时的页面展示适应性
function resize_width(width) {
if (width<320){
document.getElementsByClassName("body")[0].classList.add("zoom-80");
}else {
document.getElementsByClassName("body")[0].classList.remove("zoom-80");
}
}
/*
* 提醒
* */
function write_tips_text(text) {
document.getElementsByClassName("res-div")[0].innerHTML = '<div class="flex-center tips-div select-none hide" ><div class="res-txt">'+text+'</div></div>';
}
function show_loading(){
console_log("展示遮蔽层");
document.getElementById("loading-div").classList.remove("hide");
}
function delete_loading() {
console_log("删除遮蔽层");
document.getElementById("loading-div").classList.add("hide");
}
</script>
</html>
-
示例展示：http://cdnaliyun.oss-cn-hangzhou.aliyuncs.com
-
-
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
