【项目】主页搜索 1.0
【项目】主页搜索 1.0
前言
百度等搜索引擎拉夸，各家自己内容自己的搜索比较好，因此需要一款整合软件。本软件可以整合各种搜索引擎。
源码
- 网页
<html>
<head><style>body{background:url("./background.webp");
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
} h1{
text-align: center;
color: white;
font-size: 4rem;
margin-top: 10vh;
}.box {
display: flex;
justify-content: center;
align-items:center;
height: 50px;
width: 600px;
border: 1px gray solid;
border-radius: 30px;
overflow: hidden;
margin: 0 auto;
margin-top: 20vh;
background: rgba(255, 255, 255,.9);
}
.icon {
width: 40px;
height: 40px;
margin-left: 10px;
}
.icon img {
height: 40px;
width: auto;
}
.searchInput {width: 540px;
height: 100%;
margin-left: 5px;
background: none;}
.searchInput input{width: 100%;
height: 100%;
outline: none;
border: none;
font-size: 1.5rem;
background: none;
}style>head><body><h1>Searchh1><div class="box"><div class="icon">
<img class="searchIcon" src="https://baidu.com/favicon.ico"/>
div><div class="searchInput">
<input type="search" class="searchContent"/>
div>div>body><script>let searchEngine = nulllet searchBy = null// 获取本地搜索引擎信息window.onload = function () {var url = "searchEngine.json"/*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/var request = new XMLHttpRequest();request.open("get", url);/*设置请求方法与路径*/request.send(null);/*不发送数据到服务器*/request.onload = function () {/*XHR对象获取到返回信息后执行*/if (request.status == 200) {/*返回状态为200，即为数据获取成功*/searchEngine = JSON.parse(request.responseText);console.log(searchEngine);} else {alert("无法读取本地搜索引擎数据")}}}const content = document.querySelector(".searchContent")const icon = document.querySelector(".searchIcon")
content.oninput = function() {let value = this.value}
content.addEventListener("keyup", function (e) {console.log(e)if (e.key == "Enter") {let searchUrl = null;let words = content.value.split(" ")if (words.length > 1) {let key = words[0]searchBy = searchForEngine(key);delete words[0];if (searchBy) {searchUrl = searchBy.url.replace("%s",content.value.replace(key+" ",""))} } else {searchUrl = "https://www.baidu.com/s?wd=" + content.value}console.log(searchUrl)location.href(searchUrl)}if (e.key == " ") {let key = content.value.split(" ")[0]if (key != null) {searchBy = searchForEngine(key);if (searchBy != null) {icon.setAttribute("src", searchBy.icon)} else {icon.style.src = "https://baidu.com/favicon.ico"icon.setAttribute("src", "https://baidu.com/favicon.ico")}}}})/**
* 查询是否为特殊搜索引擎
*/
function searchForEngine(key) {let result = nullif (searchEngine) {/*searchEngine.engines.forEach(function (value, index) {console.log(value)if (value.key.indexOf(key) != -1) {console.log("找到")}})*/const engines = searchEngine.engines;for (let i = 0; i < engines.length; i++) {if (engines[i].key.indexOf(key) != -1) {result = engines[i]break;}}}if (result) {console.log("找到")} else {console.log("未找到")}return result
}script>html>- 搜索引擎数据（放在网页同级目录下）
{
"engines": [{"name": "Baidu","icon": "https://baidu.com/favicon.ico","url": "https://www.baidu.com/s?wd=%s","key": [ "baidu", "bd" ]},{"name": "Bing","icon": "https://cn.bing.com/favicon.ico","url": "https://cn.bing.com/search?q=%s","key": [ "bing", "bi" ]},{"name": "CSDN","icon": "https://so.csdn.net/favicon.ico","url": "https://so.csdn.net/so/search?q=%s","key": [ "csdn" ]},{"name": "博客园","icon": "https://www.cnblogs.com/favicon.ico","url": "https://zzk.cnblogs.com/s?w=%s","key": [ "bky","cnb"]}]
}
使用教程
- 搜索
输入关键词+空格即可切换搜索引擎，使用回车开始搜索 - 添加搜索引擎
- 搜索链接（url）：可以使用个网站搜索test，之后将test换位%s即可
- 图标（icon）：将网站顶级域名+favicon.ico即可获取大部分网站的图标
- 关键词（key）： 在key中使用数组添加，不要重复！
- 日常使用
- 方法一：可以将网站放在本地使用浏览器打开，将链接设为新建标签页或主页
- 方法二：将网页部署到服务器，将网站设为主页
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！