加入搜索引擎栏

docs/css/style.css

@@ -379,6 +379,55 @@ main section li a:not(.back) {
     }
 }
 
+/* 搜索引擎 */
+
+.search-engine {
+    width: 100%;
+}
+
+.search-engine-bar {
+   height: 45px;
+   width: 100%;
+   background-color: #FFF;
+   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
+   white-space: nowrap;
+}
+
+#search-engine-input {
+   padding-left: 15px;
+   box-sizing: border-box;
+   height: 100%;
+   width: calc(100% - 45px);
+   border: none;
+   font-size: 14px;
+}
+
+.search-engine-submit {
+    display: inline-block;
+    position: relative;
+    top: 7px;
+    left: 7px;
+    height: 24px;
+    width: 24px;
+    color: #03A9F4;
+    fill: currentcolor;
+    user-select: none;
+}
+
+.search-engine-select ul {
+    width: 100%;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+}
+
+.search-engine-select ul li {
+    display: inline-block;
+    margin: 0 5px;
+    list-style: none;
+    font-size: 16px;
+}
+
 /* 悬浮栏 */
 
 .floating-bar {

docs/index.html

@@ -16,6 +16,35 @@
         <h1>Frost 网址导航</h1>
         <p>Frost Site Navigation</p>
     </header>
+    <!-- 搜索引擎 -->
+    <div class="search-engine">
+        <div class="search-engine-bar">
+            <input id="search-engine-input" type="text" placeholder="输入关键词进行搜索" onkeydown="if (event.keyCode == 13) {searchWeb();}" />
+            <svg class="search-engine-submit" viewBox="0 0 24 24" onclick="searchWeb()">
+                <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
+            </svg>
+        </div>
+        <div class="search-engine-select">
+            <ul>
+            	<li>
+                    <input type="radio" name="search-engine-selection" id="search-engine-baidu" checked />
+                    <label for="search-engine-baidu">百度</label>
+                </li>
+            	<li>
+                    <input type="radio" name="search-engine-selection" id="search-engine-bing" />
+                    <label for="search-engine-bing">Bing</label>
+                </li>
+            	<li>
+                    <input type="radio" name="search-engine-selection" id="search-engine-google" />
+                    <label for="search-engine-google">Google</label>
+                </li>
+            	<li>
+                    <input type="radio" name="search-engine-selection" id="search-engine-bilibili" />
+                    <label for="search-engine-bilibili">bilibili</label>
+                </li>
+            </ul>
+        </div>
+    </div>
     <!-- 链接列表 -->
     <main>
         <!--
@@ -265,6 +294,7 @@
                                         <li><a href="https://message.bilibili.com/">bilibili（消息中心）</a></li>
                                     </ul>
                                 </li>
+                                <li><a href="https://www.8kraw.com//">8KRAW - 正版视频素材库</a></li>
                                 <li><a href="http://www.iqiyi.com/">爱奇艺</a></li>
                                 <li><a href="http://v.baidu.com/">百度视频</a></li>
                                 <li><a href="https://www.vmovier.com/">场库 - 高品质短片分享平台</a></li>
@@ -1229,9 +1259,9 @@
     <!-- 搜索面板 -->
     <div class="search-panel">
         <div class="search-bar">
-            <input class="search-input" type="text" placeholder="请输入关键词" onkeydown="if (event.keyCode == 13) {SearchMode = 1; search();}">
-            <button class="search-submit" onclick="SearchMode = 1; search();">搜索</button>
-            <button class="search-cancel" onclick="SearchMode = 2; search();">关闭</button>
+            <input class="search-input" type="text" placeholder="请输入关键词" onkeydown="if (event.keyCode == 13) {SearchMode = 1; searchLink();}">
+            <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>
@@ -1250,7 +1280,7 @@
     <div class="fullscreen-text">加载中...</div>
     <!-- 悬浮栏 -->
     <div class="floating-bar">
-        <div class="floating-bar-search" onclick="SearchPanel.style.visibility = 'visible'; SearchInput.focus();">搜索</div>
+        <div class="floating-bar-search" onclick="SearchPanel.style.visibility = 'visible'; SearchInput.focus();">查找</div>
         <div class="floating-bar-tool" onclick="ToolPanel.style.visibility = 'visible';">工具</div>
         <div class="floating-bar-about" onclick="window.open('https://github.com/Frost-ZX/frost-navigation/blob/master/README.md');">关于</div>
         <div class="floating-bar-totop" onclick="document.body.scrollTop = 0; document.documentElement.scrollTop = 0;">▲</div>

docs/js/script.js

@@ -91,7 +91,7 @@ var SearchPanel = document.getElementsByClassName("search-panel")[0];   // 搜
 var SearchInput = document.getElementsByClassName("search-input")[0];   // 搜索输入框
 var SearchResult = document.getElementsByClassName("search-result")[0]; // 搜索结果
 var SearchResultItem = "";
-function search() {
+function searchLink() {
     var LinkListCount = LinkList.length;                                // 循环次数
     var SearchWord = SearchInput.value.toLowerCase();                   // 搜索关键词
     if (SearchMode == 1 && SearchWord != "") {
@@ -118,6 +118,30 @@ function search() {
     }
 }
 
+/* -------- */
+/* 搜索引擎 */
+/* -------- */
+
+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;         // Bing
+    var GetSearchEngineGoogle = document.getElementById("search-engine-google").checked;     // Google
+    var GetSearchEnginebilibili = document.getElementById("search-engine-bilibili").checked; // bilibili
+    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 = "搜索引擎选择有误！"
+    }
+}
+
 /* -------- */
 /* 工具面板 */
 /* -------- */

docs/js/script.min.js

@@ -1,5 +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 search(){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 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="异常";}}
+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];