加入搜索框

README.md

@@ -22,7 +22,8 @@
 
 ## To Do
 
-- [ ] 搜索框
-- [ ] 美化
+- [x] 搜索框
 - [ ] 加入链接图标
 - [ ] 加入更多的链接
+- [ ] 美化
+- [ ] 优化代码

docs/css/styles.css

@@ -200,15 +200,19 @@ footer img {
     width: 1.5em;
 }
 
-/* 全屏文字 */
+/* 滚动条 */
 
-.fullscreen-text {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    font-size: 10vw;
-    transform: translate(-50%, -50%);
-    transition: opacity 1s;
+::-webkit-scrollbar {
+    height: 8px;
+    width: 8px;
+}
+::-webkit-scrollbar-thumb {
+    background: #999;
+    border-radius: 0;
+}
+::-webkit-scrollbar-track {
+    background: #eee;
+    border-radius: 0;
 }
 
 /* 链接的图标 */
@@ -225,6 +229,109 @@ main section li a:not(.back) {
 }
 */
 
+/* 全屏文字 */
+
+.fullscreen-text {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    font-size: 10vw;
+    transform: translate(-50%, -50%);
+    transition: opacity 1s;
+}
+
+/* 搜索面板 */
+
+.search-panel {
+    display: none;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    height: 300px;
+    width: 500px;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    transform: translate(-50%, -50%);
+}
+.search-bar{
+    text-align: center;
+}
+.search-bar .search-input {
+    margin: 20px 5px 0 0;
+    padding: 0 15px;
+    width: 60%;
+    height: 50px;
+    border: solid 2px #03A9F4;
+    font-size: 20px;
+}
+.search-bar .search-submit, .search-bar .search-cancel {
+    width: 75px;
+    height: 50px;
+    border: none;
+    background-color: #03A9F4;
+    font-size: 20px;
+    color: #FFF;
+}
+.search-bar .search-submit {
+    margin-right: 5px;
+}
+.search-result {
+    margin-top: 10px;
+    padding: 0 16px;
+    height: calc(100% - 100px);
+    overflow-y: scroll;
+}
+.search-result a {
+    display: block;
+    margin-bottom: 10px;
+    font-size: 20px;
+}
+@media screen and (max-width: 500px) {
+    .search-panel {
+        top: 32%;
+        height: 300px;
+        width: 100%;
+    }
+    .search-bar .search-input {
+        margin: 15px 5px 0 0;
+        padding: 0 10px;
+        width: 50%;
+        height: 40px;
+        font-size: 16px;
+    }
+    .search-bar .search-submit, .search-bar .search-cancel {
+        width: 16%;
+        height: 40px;
+        font-size: 16px;
+    }
+    .search-result {
+        padding: 0 6%;
+        height: calc(100% - 80px);
+    }
+    .search-result a {
+        margin-bottom: 10px;
+        font-size: 20px;
+    }
+}
+
+/* 悬浮栏 */
+
+.floating-bar {
+    position: fixed;
+    left: 50%;
+    bottom: 16px;
+    padding-top: 7px;
+    width: 50px;
+    height: 32px;
+    background-color: #4CAF50;
+    box-shadow: 0 0 10px rgba(76, 175, 80, 0.8);
+    text-align: center;
+    font-size: 16px;
+    color: #fff;
+    opacity: 0.9;
+    transform: translateX(-50%)
+}
+
 /* 选中 */
 
 ::selection {

docs/index.html

@@ -90,10 +90,10 @@
         <section>
             <h2>博客 / 论坛 / 社区</h2>
             <div id="list_2">
-                <ul>
+                <ul class="JTA">
                     <li>
                         <a href="#">博客</a>
-                        <ul>
+                        <ul class="JTB">
                             <li><a href="https://4ssh.cn/">4SSH</a></li>
                             <li><a href="http://lolicorn.com/">安和 Blog</a></li>
                             <li><a href="https://www.myitmx.com/">枫叶博客</a></li>
@@ -118,7 +118,7 @@
                     </li>
                     <li>
                         <a href="#">社区</a>
-                        <ul>
+                        <ul class="JTC">
                             <li><a href="https://tieba.baidu.com/">百度贴吧</a></li>
                             <li><a href="https://www.douban.com/">豆瓣</a></li>
                             <li><a href="https://www.oschina.net/">开源中国</a></li>
@@ -554,7 +554,7 @@
             <div id="list_10">
                 <ul>
                     <li>
-                        <a href="#">Chrome</a>
+                        <a href="#">Chrome（浏览器限制，需要复制链接后手动打开）</a>
                         <ul>
                             <li><a href="chrome://user-actions/">操作记录</a></li>
                             <li><a href="chrome://version/">关于版本</a></li>
@@ -1125,7 +1125,16 @@
             </div>
         </section>
     </main>
+    <div class="search-panel">
+        <div class="search-bar">
+            <input type="text" class="search-input" autofocus>
+            <button class="search-submit" onclick="SearchMode = 1; search();">搜索</button>
+            <button class="search-cancel" onclick="SearchMode = 2; search();">关闭</button>
+        </div>
+        <div class="search-result"></div>
+    </div>
     <div class="fullscreen-text">加载中...</div>
+    <div class="floating-bar" onclick="SearchPanel.style.display = 'block'; SearchInput.focus();">搜索</div>
     <footer>
         &#169; 2019 <a href="https://github.com/Frost-ZX/frost-navigation">Frost 网址导航</a>
         | Made by <a href="https://frost-zx.github.io/" target="_blank">Frost-ZX</a>

docs/js/script.js

@@ -21,7 +21,7 @@ function loadList() {
     ListCount = ListCount + 1;
     if (ListCount == ListCountMax) {
       clearInterval(I_LoadList);
-      setTimeout("setTarget();displayList();console.log('列表加载完毕');", 200); // 调用
+      setTimeout("setTarget(); displayList(); console.log('列表加载完毕');", 200); // 调用
     }
     ListID = "#list_" + ListCount;
     $(ListID).slinky(SlinkyOption);
@@ -53,3 +53,31 @@ function displayList() {
 
 // 调用（加载列表，间隔 100 毫秒）
 var I_LoadList = setInterval("loadList()", 100);
+
+// 搜索框
+var SearchMode = 1;
+var SearchPanel = document.getElementsByClassName("search-panel")[0];
+var SearchInput = document.getElementsByClassName("search-input")[0];
+var SearchList = document.getElementsByTagName("main")[0].getElementsByTagName("a");
+var SearchText = document.getElementsByClassName("search-input")[0];
+var SearchResult = document.getElementsByClassName("search-result")[0];
+var SearchResultSource = "";   
+var SearchResultItem = "";
+function search() {
+    var SearchListCount = SearchList.length;
+    var SearchWord = SearchText.value;
+    if (SearchMode == 1 && SearchWord != "") {
+        SearchResult.innerHTML = "";
+        for (var i = 0; i < SearchListCount; i++) {
+            if (SearchList[i].innerText.indexOf(SearchWord) != -1 && SearchList[i].href.endsWith("#") == false) {
+                SearchResultSource = SearchList[i];
+                SearchResultItem = SearchResultSource.cloneNode(true);
+                SearchResult.appendChild(SearchResultItem);
+            }
+        }
+    } else if (SearchMode == 1 && SearchWord == "") {
+        SearchResult.innerHTML = "请输入关键词";
+    } else if (SearchMode == 2) {
+        SearchPanel.style.display = "none";
+    }
+}