分离搜索结果(标题和链接)

This commit is contained in:
2019-10-09 17:06:39 +08:00
parent 179a6dac55
commit 458f87afe1
5 changed files with 63 additions and 62 deletions

View File

@@ -351,6 +351,12 @@ main section li a:not(.back) {
margin-bottom: 10px;
font-size: 20px;
}
#search-result-title {
border-bottom: 1px solid #DDD;
}
#search-result-link {
margin-top: 7px;
}
@media screen and (max-width: 500px) {
.search-panel {
/* top: 32%; */
@@ -384,7 +390,6 @@ main section li a:not(.back) {
.search-engine {
width: 100%;
}
.search-engine-bar {
height: 45px;
width: 100%;
@@ -393,7 +398,6 @@ main section li a:not(.back) {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
white-space: nowrap;
}
#search-engine-input {
padding-left: 15px;
box-sizing: border-box;
@@ -403,7 +407,6 @@ main section li a:not(.back) {
border: none;
font-size: 14px;
}
.search-engine-submit {
display: inline-block;
position: relative;
@@ -415,20 +418,17 @@ main section li a:not(.back) {
fill: currentcolor;
user-select: none;
}
.search-engine-select ul {
margin-top: 20px;
width: 100%;
text-align: center;
}
.search-engine-select ul li {
display: inline-block;
margin: 0 5px;
list-style: none;
font-size: 16px;
}
/* radio 样式 */
.search-engine-select ul li input[type="radio"] {
position: absolute;

View File

@@ -68,25 +68,16 @@
</section>
-->
<section>
<h2>百科 / 科普 / 资料</h2>
<h2>百科 / 教程 / 科普 / 资料</h2>
<div id="list_1">
<ul>
<li>
<a href="#">菜鸟教程</a>
<!-- <ul class="active"> -->
<ul>
<li><a href="https://www.runoob.com/">菜鸟教程</a></li>
<li><a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li>
<li><a href="https://www.runoob.com/http/http-status-codes.html">HTTP 状态码</a></li>
</ul>
</li>
<li>
<a href="#">维基百科</a>
<a href="#">百科</a>
<ul>
<li><a href="https://baike.baidu.com/">百度百科</a></li>
<li><a href="https://ipaperclip.net/">回形针手册</a></li>
<li><a href="https://zh.moegirl.org/">萌娘百科</a></li>
<li><a href="https://zh.wikipedia.org/">维基百科</a></li>
<li><a href="https://zh.wikipedia.org/wiki/Template:广州地铁标志色">广州地铁标志色</a></li>
</ul>
</li>
<li>
<a href="#">Unicode®字符百科</a>
<ul>
@@ -95,24 +86,20 @@
<li><a href="https://unicode-table.com/cn/tools/decoder/">工具 - 解码器</a></li>
<li><a href="https://unicode-table.com/cn/tools/flip/">工具 - 翻转</a></li>
<li><a href="https://unicode-table.com/cn/tools/generator/">工具 - Unicode 字符表生成</a></li>
<li><a href="https://unicode-table.com/cn/sets/currency-symbols/">货币符号</a></li>
<li><a href="https://unicode-table.com/cn/blocks/kangxi-radicals/">康熙部首</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">w3school 在线教程</a>
<a href="#">教程</a>
<ul>
<li><a href="https://www.runoob.com/">菜鸟教程</a></li>
<li><a href="http://www.w3school.com.cn/">w3school 在线教程</a></li>
<li><a href="http://www.w3school.com.cn/jsref/jsref_obj_date.asp">JavaScript Date 对象</a></li>
<li><a href="http://www.w3school.com.cn/media/media_mimeref.asp">MIME 参考手册</a></li>
</ul>
</li>
<li>
<a href="#">其他</a>
<a href="#">资料</a>
<ul>
<li><a href="https://baike.baidu.com/">百度百科</a></li>
<li><a href="https://ipaperclip.net/">回形针手册</a></li>
<li><a href="https://zh.moegirl.org/">萌娘百科</a></li>
<li><a href="https://ctext.org/zhs">中国哲学书电子化计划</a></li>
</ul>
</li>
@@ -277,7 +264,6 @@
<ul>
<li><a href="http://pad.cretech.cn/livecloud/pcindex.php">创先泰克教育云</a></li>
<li><a href="https://www.douyu.com/">斗鱼</a></li>
<li><a href="http://qzs.qq.com/iot/mobile/starplan/index.html">公共摄像头QQ</a></li>
<li><a href="https://www.huya.com/">虎牙直播</a></li>
<li><a href="http://v.163.com/">网易直播</a></li>
<li><a href="https://www.earthtv.com/">earthTV</a></li>
@@ -356,7 +342,6 @@
<a href="#">网站</a>
<ul>
<li><a href="http://www.5nd.com/">5nd</a></li>
<li><a href="http://www.5nd.com/fm/">5nd - TimeZ</a></li>
<li><a href="https://www.kugou.com/">酷狗音乐</a></li>
<li><a href="https://www.kuwo.cn/">酷我音乐</a></li>
<li><a href="https://music.taihe.com/">千千音乐</a></li>
@@ -405,7 +390,6 @@
<li><a href="https://cybermap.kaspersky.com/cn/">卡巴斯基网络威胁实时地图</a></li>
<li><a href="https://map.qq.com/">腾讯地图</a></li>
<li><a href="https://cn.bing.com/maps">Bing 地图</a></li>
<li><a href="http://www.edushi.com/">E都市三维地图</a></li>
<li><a href="https://www.osgeo.cn/">OSGeo中国中心 - 地理空间数据共享</a></li>
</ul>
</li>
@@ -517,7 +501,6 @@
<ul>
<li><a href="http://cli.im/">草料二维码</a></li>
<li><a href="http://tool.chinaz.com/tools/sinadwz.aspx">批量新浪短链</a></li>
<li><a href="https://www.xfyun.cn/services/online_tts">语音合成(讯飞开放平台)</a></li>
<li><a href="https://smallpdf.com/">Smallpdf - 您所有 PDF 问题的免费解决方案</a></li>
<li><a href="http://www.docpe.com/word/word-to-html.aspx">Word 转 HTML</a></li>
</ul>
@@ -914,6 +897,7 @@
<li><a href="https://cuberite.org/">Cuberite</a></li>
<li><a href="https://www.mcedit-unified.net/">MCEdit Unified</a></li>
<li><a href="http://www.realtimerendering.com/erich/minecraft/public/mineways/">Mineways</a></li>
<li><a href="https://mcreator.net/">MCreator - The Best Minecraft Mod Maker Ever</a></li>
<li><a href="https://zh-cn.namemc.com/">NameMC</a></li>
<li><a href="https://www.minecraftjson.com/">Tellraw Generator</a></li>
<li><a href="https://www.universalminecrafteditor.com/">Universal Minecraft Editor</a></li>
@@ -942,7 +926,6 @@
<ul>
<li><a href="https://www.bakaxl.com/">BakaXL</a></li>
<li><a href="http://jespertheend.com/">Jesper the End</a></li>
<li><a href="https://mcreator.pylo.co/">MCreator</a></li>
<li><a href="https://www.mineimator.com/">Mine-imator</a></li>
<li><a href="https://www.curseforge.com/minecraft/mc-mods">Minecraft CurseForge (Mod)</a></li>
<li><a href="http://www.minecraftxz.com/">Minecraft 中文下载站</a></li>
@@ -1229,12 +1212,18 @@
</ul>
</li>
<li>
<a href="#">API</a>
<a href="#">API / 开放平台</a>
<ul>
<li><a href="https://lbs.amap.com/">高德开放平台</a></li>
<li><a href="http://www.itpk.cn/robot.php">茉莉机器人 API</a></li>
<li><a href="https://open.tencent.com/">腾讯开放平台</a></li>
<li><a href="javascript:prompt('API','https://music.163.com/song/media/outer/url?id={音乐 ID}.mp3'); void(0);">网易云音乐音频 API</a></li>
<li><a href="https://open.weixin.qq.com/">微信开放平台</a></li>
<li><a href="https://open.weibo.com/">新浪微博开放平台</a></li>
<li><a href="https://www.xfyun.cn/">讯飞开放平台</a></li>
<li><a href="https://api.imjad.cn/">AD's API</a></li>
<li><a href="https://app.crisp.chat/">Crisp</a></li>
<li><a href="https://open.oppomobile.com/">OPPO开放平台</a></li>
<li><a href="https://valine.js.org/">Valine</a></li>
</ul>
</li>
@@ -1263,7 +1252,10 @@
<button class="search-submit" onclick="SearchMode = 1; searchLink();">查找</button>
<button class="search-cancel" onclick="SearchMode = 2; searchLink();">关闭</button>
</div>
<div class="search-result"></div>
<div class="search-result">
<div id="search-result-title"></div>
<div id="search-result-link"></div>
</div>
</div>
<!-- 工具面板 -->
<div class="tool-panel">

View File

@@ -89,32 +89,41 @@ var I_LoadList = setInterval("loadList()", 100);
var SearchMode = 1;
var SearchPanel = document.getElementsByClassName("search-panel")[0]; // 搜索面板
var SearchInput = document.getElementsByClassName("search-input")[0]; // 搜索输入框
var SearchResult = document.getElementsByClassName("search-result")[0]; // 搜索结果
var SearchResultTitle = document.getElementById("search-result-title"); // 搜索结果(标题)
var SearchResultLink = document.getElementById("search-result-link"); // 搜索结果(链接)
var SearchResultItem = "";
function searchLink() {
var LinkListCount = LinkList.length; // 循环次数
var SearchWord = SearchInput.value.toLowerCase(); // 搜索关键词
if (SearchMode == 1 && SearchWord != "") {
SearchResult.innerHTML = ""; // 清空搜索结果
SearchResultTitle.innerHTML = ""; // 清空搜索结果(标题)
SearchResultLink.innerHTML = ""; // 清空搜索结果(链接)
for (var i = 0; i < LinkListCount; i++) {
// 排除 href 是 # 的元素 //
if (LinkList[i].href.endsWith("#") == false) {
// 匹配关键词 //
if (LinkList[i].innerText.toLowerCase().indexOf(SearchWord) != -1 || LinkList[i].href.indexOf(SearchWord) != -1) {
// 复制元素 //
if (LinkList[i].innerText.toLowerCase().indexOf(SearchWord) != -1) {
// 匹配标题 //
SearchResultItem = LinkList[i].cloneNode(true);
SearchResult.appendChild(SearchResultItem);
SearchResultTitle.appendChild(SearchResultItem); // 复制元素
} else if (LinkList[i].href.indexOf(SearchWord) != -1) {
// 匹配链接 //
SearchResultItem = LinkList[i].cloneNode(true);
SearchResultLink.appendChild(SearchResultItem); // 复制元素
}
}
}
} else if (SearchMode == 1 && SearchWord == "") {
SearchResult.innerHTML = "请输入关键词";
SearchResultTitle.innerHTML = "";
SearchResultLink.innerHTML = "未输入关键词";
} else if (SearchMode == 2) {
SearchInput.value = ""; // 清空输入框
SearchResult.innerHTML = ""; // 清空搜索结果
SearchResultTitle.innerHTML = ""; // 清空搜索结果(标题)
SearchResultLink.innerHTML = ""; // 清空搜索结果(链接)
SearchPanel.style.visibility = "hidden"; // 隐藏搜索面板
} else {
SearchResult.innerHTML = "异常";
SearchResultTitle.innerHTML = "";
SearchResultLink.innerHTML = "异常";
}
}

View File

@@ -1,6 +1,6 @@
var SlinkyOption={title:true,speed:200};var ListID="#list_";var ListCount=0;var ListCountMax=17;var FullsSreenText=document.getElementsByClassName("fullscreen-text")[0];function loadList(){ListCount=ListCount+1;ListID="#list_"+ListCount;$(ListID).slinky(SlinkyOption);FullsSreenText.innerText="已加载 "+ListCount+" 个分类";if(ListCount==ListCountMax){clearInterval(I_LoadList);FullsSreenText.innerText="加载完毕";setTarget();displayList();}}
var LinkList=document.getElementsByTagName("main")[0].getElementsByTagName("a");function setTarget(){for(var i=0;i<LinkList.length;i++){if(LinkList[i].href.endsWith("#")==false){LinkList[i].target="_blank";}}}
function displayList(){document.getElementsByTagName("main")[0].style.opacity="1";FullsSreenText.style.opacity="0";setTimeout("document.getElementsByClassName('fullscreen-text')[0].style.display = 'none';",1000);}
var I_LoadList=setInterval("loadList()",100);var SearchMode=1;var SearchPanel=document.getElementsByClassName("search-panel")[0];var SearchInput=document.getElementsByClassName("search-input")[0];var SearchResult=document.getElementsByClassName("search-result")[0];var SearchResultItem="";function searchLink(){var LinkListCount=LinkList.length;var SearchWord=SearchInput.value.toLowerCase();if(SearchMode==1&&SearchWord!=""){SearchResult.innerHTML="";for(var i=0;i<LinkListCount;i++){if(LinkList[i].href.endsWith("#")==false){if(LinkList[i].innerText.toLowerCase().indexOf(SearchWord)!=-1||LinkList[i].href.indexOf(SearchWord)!=-1){SearchResultItem=LinkList[i].cloneNode(true);SearchResult.appendChild(SearchResultItem);}}}}else if(SearchMode==1&&SearchWord==""){SearchResult.innerHTML="输入关键词";}else if(SearchMode==2){SearchInput.value="";SearchResult.innerHTML="";SearchPanel.style.visibility="hidden";}else{SearchResult.innerHTML="异常";}}
var I_LoadList=setInterval("loadList()",100);var SearchMode=1;var SearchPanel=document.getElementsByClassName("search-panel")[0];var SearchInput=document.getElementsByClassName("search-input")[0];var SearchResultTitle=document.getElementById("search-result-title");var SearchResultLink=document.getElementById("search-result-link");var SearchResultItem="";function searchLink(){var LinkListCount=LinkList.length;var SearchWord=SearchInput.value.toLowerCase();if(SearchMode==1&&SearchWord!=""){SearchResultTitle.innerHTML="";SearchResultLink.innerHTML="";for(var i=0;i<LinkListCount;i++){if(LinkList[i].href.endsWith("#")==false){if(LinkList[i].innerText.toLowerCase().indexOf(SearchWord)!=-1){SearchResultItem=LinkList[i].cloneNode(true);SearchResultTitle.appendChild(SearchResultItem);}else if(LinkList[i].href.indexOf(SearchWord)!=-1){SearchResultItem=LinkList[i].cloneNode(true);SearchResultLink.appendChild(SearchResultItem);}}}}else if(SearchMode==1&&SearchWord==""){SearchResultTitle.innerHTML="";SearchResultLink.innerHTML="未输入关键词";}else if(SearchMode==2){SearchInput.value="";SearchResultTitle.innerHTML="";SearchResultLink.innerHTML="";SearchPanel.style.visibility="hidden";}else{SearchResultTitle.innerHTML="";SearchResultLink.innerHTML="异常";}}
function searchWeb(){var GetSearchWord=document.getElementById("search-engine-input");var SearchWord=GetSearchWord.value;var GetSearchEngineBaidu=document.getElementById("search-engine-baidu").checked;var GetSearchEngineBing=document.getElementById("search-engine-bing").checked;var GetSearchEngineGoogle=document.getElementById("search-engine-google").checked;var GetSearchEnginebilibili=document.getElementById("search-engine-bilibili").checked;if(GetSearchEngineBaidu==true){window.open("https://www.baidu.com/s?ie=UTF-8&wd="+SearchWord);}else if(GetSearchEngineBing==true){window.open("https://cn.bing.com/search?q="+SearchWord);}else if(GetSearchEngineGoogle==true){window.open("https://www.google.com/search?q="+SearchWord);}else if(GetSearchEnginebilibili==true){window.open("https://search.bilibili.com/all"+"?keyword="+SearchWord);}else{GetSearchWord.value="搜索引擎选择有误!"}}
var ToolPanel=document.getElementsByClassName("tool-panel")[0];

View File

@@ -10,9 +10,9 @@
</head>
<body>
<div class="main">
<!-- 导航 -->
<!-- 索引 -->
<div class="tool-nav">
<header>导航</header>
<header>索引</header>
<div class="tool-nav-link">
<ul>
<li><a href="#tool-unixtime">Unix 时间戳转换</a></li>