更新“工具”页面；主页可访问“工具”页面

docs/css/style.css

@@ -9,8 +9,6 @@
  * text #222
  */
 
-/* reset */
-
 * {
     border-radius: 0;
     box-sizing: border-box;
@@ -21,8 +19,6 @@
     user-select: none;
 }
 
-/* global */
-
 html {
     scroll-behavior: smooth;
 }
@@ -223,31 +219,54 @@ footer img {
 /* 工具面板 */
 
 .tool-panel {
+    visibility: hidden;
+    z-index: 100;
     position: fixed;
     left: 0;
     bottom: 0;
 }
 
 .tool-panel-bar {
-    height: 5vh;
+    height: 32px;
-    background-color: #F5F5F5;
+}
+
+.tool-panel-newtab, .tool-panel-close {
+    position: absolute;
+    top: 0;
+    height: 32px;
+    width: 64px;
+    box-shadow: -2px 0 10px 0 rgba(0, 0, 0, 0.1);
+    line-height: 32px;
+    text-align: center;
+    font-size: 14px;
+    color: #FFF;
+}
+
+.tool-panel-blank {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 32px;
+    width: 100%;
+    background-color: #FFF;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.tool-panel-newtab {
+    right: 72px;
+    background-color: #2196F3;
 }
 
 .tool-panel-close {
-    position: absolute;
-    top: 0;
     right: 8px;
-    height: 5vh;
+    background-color: #F44336;
-    width: 5vh;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
-    background-color: #4CAF50;
 }
 
 .tool-panel-iframe {
 }
 
 .tool-panel-iframe iframe {
-    height: 95vh;
+    height: calc(100vh - 32px);
     width: 100vw;
 }
 
@@ -271,7 +290,7 @@ main section li a:not(.back) {
     position: fixed;
     top: 50%;
     left: 50%;
-    font-size: 10vw;
+    font-size: 5vw;
     transform: translate(-50%, -50%);
     transition: opacity 1s;
 }
@@ -310,7 +329,7 @@ main section li a:not(.back) {
     height: 50px;
     border: none;
     background-color: #03A9F4;
-    box-shadow: 0 0 5px rgba(3, 169, 244, 0.1);
+    box-shadow: 0 5px 10px -5px rgba(3, 169, 244, 0.4);
     font-size: 20px;
     color: #FFF;
     transition: background 0.2s;
@@ -363,6 +382,7 @@ main section li a:not(.back) {
 /* 悬浮栏 */
 
 .floating-bar {
+    z-index: 50;
     position: fixed;
     left: 0;
     bottom: 20px;

docs/css/tool.css

@@ -5,8 +5,14 @@
     padding: 0;
 }
 
+html {
+    scroll-behavior: smooth;
+}
+
 body {
+    padding: 20px 0 50px 0;
     background-color: #F5F5F5;
+    scroll-behavior: smooth;
 }
 
 /* 滚动条 */
@@ -52,6 +58,7 @@ body {
     padding: 15px;
     box-sizing: border-box;
     width: 100%;
+    border-radius: 5px;
     background-color: #FFF;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
@@ -63,12 +70,21 @@ body {
     font-weight: bold;
 }
 
+.main > div input:focus {
+    outline: none;
+}
+
 .main > div textarea {
     padding: 5px;
     box-sizing: border-box;
+    width: 100%;
     border: 1px solid #03A9F4;
-    font-size: 16px;
     box-shadow: 0 0 5px rgba(3, 169, 244, 0.2);
+    font-size: 14px;
+}
+
+.main > div textarea:focus {
+    outline: none;
 }
 
 .tool-button {
@@ -81,17 +97,47 @@ body {
     color: #FFF;
     border-radius: 5px;
     box-shadow: 2px 2px 5px rgba(3, 169, 244, 0.4);
+    transition: background 0.2s;
 }
 
 .tool-button:hover {
     background-color: #2196F3;
 }
 
+/* 导航 */
+
+.tool-nav ul li {
+    display: inline-block;
+    list-style: none;
+}
+
+.tool-nav ul li a {
+    display: block;
+    float: left;
+    padding: 5px 9px;
+    border-radius: 5px;
+    background-color: #4CAF50;
+    text-decoration: none;
+    font-size: 14px;
+    color: #FFF;
+    transition: background 0.2s;
+}
+
+.tool-nav ul li a:hover {
+    background-color: #8BC34A;
+}
+
+.tool-nav-link {
+    margin: 0 auto;
+    box-sizing: border-box;
+    width: 100%;
+}
+
 /* 计算 */
 
 .tool-calculate textarea {
-    width: 100%;
+    resize: vertical;
-    resize: none;
+    font-size: 16px;
 }
 
 .tool-calculate-tofixed {
@@ -105,25 +151,68 @@ body {
 
 /* 生成批量下载链接 */
 
+.tool-genlink hr {
+    height: 0;
+    border: 0.5px solid #EEE;
+}
+
 .tool-genlink-link input {
     margin-bottom: 10px;
+    padding: 0 2px;
     height: 20px;
     width: 80%;
+    border: 1px solid #03A9F4;
 }
 
 .tool-genlink-settings {
+    user-select: none;
+    font-size: 14px;
+}
+
+.tool-genlink-settings > div {
+    margin: 5px 0;
+}
+
+.tool-genlink-settings input[type="text"] {
+    width: 25px;
     font-size: 14px;
 }
 
 .tool-genlink .tool-button {
-    position: relative;
+    margin: 10px 5px 10px 0;
-    left: 50%;
-    margin-bottom: 10px;
-    transform: translateX(-50%);
 }
 
 .tool-genlink textarea {
-    width: 100%;
+    resize: vertical;
-    resize: none;
     font-size: 14px;
 }
+
+/* 运行 JavaScript */
+
+.tool-runjs textarea {
+    resize: vertical;
+    font-family: monospace;
+    font-size: 14px;
+}
+
+.tool-runjs .tool-button {
+    margin: 5px 5px 0 0;
+}
+
+/* 返回顶部 */
+
+.to-top {
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    box-shadow: 2px 2px 5px rgba(76, 175, 80, 0.5);
+    background-color: #4CAF50;
+    text-align: center;
+    line-height: 36px;
+    font-size: 20px;
+    color: #FFF;
+    user-select: none;
+}

docs/index.html

@@ -16,6 +16,7 @@
         <h1>Frost 网址导航</h1>
         <p>Frost Site Navigation</p>
     </header>
+    <!-- 链接列表 -->
     <main>
         <!--
         增加一个大类
@@ -1221,6 +1222,7 @@
             </div>
         </section>
     </main>
+    <!-- 搜索面板 -->
     <div class="search-panel">
         <div class="search-bar">
             <input class="search-input" type="text" placeholder="请输入关键词" onkeydown="if (event.keyCode == 13) {SearchMode = 1; search();}">
@@ -1229,23 +1231,27 @@
         </div>
         <div class="search-result"></div>
     </div>
-    <!--
+    <!-- 工具面板 -->
     <div class="tool-panel">
         <div class="tool-panel-bar">
-            <div class="tool-panel-close"></div>
+            <div class="tool-panel-blank"></div>
+            <div class="tool-panel-newtab" onclick="window.open('tool.html');">新窗口</div>
+            <div class="tool-panel-close" onclick="ToolPanel.style.visibility = 'hidden';">关闭</div>
         </div>
         <div class="tool-panel-iframe">
             <iframe src="tool.html" frameborder="0"></iframe>
         </div>
     </div>
-    -->
+    <!-- 加载中提示 -->
     <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-tool" onclick="alert('开发中');">工具</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>
     </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>
@@ -1254,6 +1260,7 @@
         | Made with <img src="files/heart.svg" alt="love"/>
         by <a href="http://designplox.com">Ali Zahid</a>
     </footer>
+    <!-- JavaScript -->
     <script src="js/jquery-3.2.1.min.js"></script>
     <script src="js/slinky.min.js"></script>
     <script src="js/script.min.js"></script>

docs/js/script.js

@@ -1,4 +1,6 @@
-// 查找字符 tChar 在 str 中第 num 次出现的位置
+/* ------------------------------------------- */
+/* 查找字符 tChar 在 str 中第 num 次出现的位置 */
+/* ------------------------------------------- */
 
 /* 暂不使用
 function findChar(str, tChar, num) {
@@ -13,35 +15,42 @@ function findChar(str, tChar, num) {
 }
 */
 
-// 加载列表
+/* -------- */
+/* 加载列表 */
+/* -------- */
 
-// Slinky 插件的 Option
+// Slinky 插件的 Option //
 var SlinkyOption = {
     title: true,
     speed: 200
 };
-var ListID = "#list_"
+var ListID = "#list_";                                                      // 列表 ID 前缀
 var ListCount = 0;
-// 列表总数
+var ListCountMax = 17;                                                      // 列表总数
-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);
+        clearInterval(I_LoadList);                                          // 停止定时执行
-        setTarget();
+        FullsSreenText.innerText = "加载完毕";                              // 全屏文字
-        displayList();
+        setTarget();                                                        // 设置 target
-        // document.title = "Frost 网址导航";
+        displayList();                                                      // 显示列表
     }
 }
 
-// main 中的 A 标签的对象的集合（链接列表）
+/* --------------------------------------- */
+/* main 中的 A 标签的对象的集合（链接列表）*/
+/* --------------------------------------- */
 
 var LinkList = document.getElementsByTagName("main")[0].getElementsByTagName("a");
 
-// 设置 target = "_blank"
+/* ---------------------- */
+/* 设置 target = "_blank" */
+/* ---------------------- */
 
 function setTarget() {
     for (var i = 0; i < LinkList.length; i++) {
@@ -57,39 +66,42 @@ function setTarget() {
     }
 }
 
-// 显示列表
+/* -------- */
+/* 显示列表 */
+/* -------- */
 
 function displayList() {
     document.getElementsByTagName("main")[0].style.opacity = "1";
-    document.getElementsByClassName("fullscreen-text")[0].style.opacity = "0";
+    FullsSreenText.style.opacity = "0";
     setTimeout("document.getElementsByClassName('fullscreen-text')[0].style.display = 'none';", 1000);
 }
 
-// 加载列表，间隔 100 毫秒
+/* ----------------------- */
+/* 加载列表，间隔 100 毫秒 */
+/* ----------------------- */
 
 var I_LoadList = setInterval("loadList()", 100);
 
-// 搜索框
+/* -------- */
+/* 搜索面板 */
+/* -------- */
 
 var SearchMode = 1;
-// 搜索面板
+var SearchPanel = document.getElementsByClassName("search-panel")[0];   // 搜索面板
-var SearchPanel = document.getElementsByClassName("search-panel")[0];
+var SearchInput = document.getElementsByClassName("search-input")[0];   // 搜索输入框
-// 搜索输入框
+var SearchResult = document.getElementsByClassName("search-result")[0]; // 搜索结果
-var SearchInput = document.getElementsByClassName("search-input")[0];
-// 搜索结果
-var SearchResult = document.getElementsByClassName("search-result")[0];
 var SearchResultItem = "";
 function search() {
-    // 循环次数
+    var LinkListCount = LinkList.length;                                // 循环次数
-    var LinkListCount = LinkList.length;
+    var SearchWord = SearchInput.value.toLowerCase();                   // 搜索关键词
-    // 搜索关键词
-    var SearchWord = SearchInput.value.toLowerCase();
     if (SearchMode == 1 && SearchWord != "") {
-        // 清空搜索结果
+        SearchResult.innerHTML = "";                                    // 清空搜索结果
-        SearchResult.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) {
+                    // 复制元素 //
                     SearchResultItem = LinkList[i].cloneNode(true);
                     SearchResult.appendChild(SearchResultItem);
                 }
@@ -98,11 +110,16 @@ function search() {
     } else if (SearchMode == 1 && SearchWord == "") {
         SearchResult.innerHTML = "请输入关键词";
     } else if (SearchMode == 2) {
-        // 清空输入框
+        SearchInput.value = "";                       // 清空输入框
-        SearchInput.value = "";
+        SearchResult.innerHTML = "";                  // 清空搜索结果
-        // 清空搜索结果
+        SearchPanel.style.visibility = "hidden";      // 隐藏搜索面板
-        SearchResult.innerHTML = "";
+    } else {
-        // 隐藏搜索面板
+        SearchResult.innerHTML = "异常";
-        SearchPanel.style.visibility = "hidden";
     }
 }
+
+/* -------- */
+/* 工具面板 */
+/* -------- */
+
+var ToolPanel = document.getElementsByClassName("tool-panel")[0];   // 工具面板

docs/js/script.min.js

@@ -1,5 +1,5 @@
-var SlinkyOption={title:true,speed:200};var ListID="#list_";
+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 ListCount=0;var ListCountMax=17;function loadList(){ListCount=ListCount+1;ListID="#list_"+ListCount;$(ListID).slinky(SlinkyOption);if(ListCount==ListCountMax){clearInterval(I_LoadList);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";document.getElementsByClassName("fullscreen-text")[0].style.opacity="0";setTimeout("document.getElementsByClassName('fullscreen-text')[0].style.display = 'none';",1000);}
+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";}}
+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 ToolPanel=document.getElementsByClassName("tool-panel")[0];

docs/js/tool.js

@@ -1,16 +1,180 @@
+/* ---- */
+/* 计算 */
+/* ---- */
+
 function toolCalculateSubmit() {
-    getInput = document.getElementById("tool-calculate-input");
+    GetInput = document.getElementById("tool-calculate-input");                // 算式输入框
-    getToFixed = document.getElementsByClassName("tool-calculate-tofixed")[0];
+    GetToFixed = document.getElementsByClassName("tool-calculate-tofixed")[0]; // 保留小数点后的位数
-    getResult = document.getElementsByClassName("tool-calculate-result")[0].getElementsByTagName("span")[0];
+    GetResult = document.getElementsByClassName("tool-calculate-result")[0].getElementsByTagName("span")[0]; // 结果
-    if (getToFixed.value >= 0 && getToFixed.value <= 16) {
+    GetCal = GetInput.value;                    // 获取输入的算式
-        getResult.innerText = eval(getInput.value).toFixed(getToFixed.value);
+    GetCal = GetCal.replace(/π/g, "Math.PI");  // 替换（圆周率，Math.PI）
+    GetCal = GetCal.replace(/幂/g, "Math.pow"); // 替换（乘方运算，Math.pow）
+    GetCal = GetCal.replace(/平方根/g, "Math.sqrt"); // 替换（乘方运算，Math.pow）
+    // 运行 //
+    if (GetToFixed.value >= 0 && GetToFixed.value <= 16) {
+        GetResult.innerText = eval(GetCal).toFixed(GetToFixed.value);
     } else {
-        getResult.innerText = "错误";
+        GetResult.innerText = "保留位数有误（0 ~ 16 之间）";
     }
 }
 
 function toolCalculateClear() {
-    getInput = document.getElementById("tool-calculate-input");
+    GetInput = document.getElementById("tool-calculate-input"); // 算式输入框
-    getInput.value = '';
+    GetInput.value = '';                                        // 清空“输入框”和“结果”
-    getResult.innerText = '';
+    GetResult.innerText = '';                                   // 清空“结果”
+}
+
+/* ---------------- */
+/* 生成批量下载链接 */
+/* ---------------- */
+
+function toolGenLinkSubmit() {
+    var VarText = "(*)"; // 变量表示
+    var BaseLink = document.getElementsByClassName("tool-genlink-link")[0].getElementsByTagName("input")[0].value; // 网址
+    var GetSettingType = document.getElementsByName("genlink-settings"); // 批量变化类型
+    // 设定 //
+    var GetSettingA = document.getElementsByClassName("genlink-settings-a")[0].getElementsByTagName("input"); // 等差数列
+    var GetSettingB = document.getElementsByClassName("genlink-settings-b")[0].getElementsByTagName("input"); // 等比数列
+    var GetSettingC = document.getElementsByClassName("genlink-settings-c")[0].getElementsByTagName("input"); // 字母变化
+    // 结果 //
+    var GetResult = document.getElementById("tool-genlink-result");
+    var LinkReplace = '';
+    var LinkResult = '';
+    // 自动补零 //
+    function AddZero() {
+        if (NumLength < NumLastLength) {
+            var ZeroMax = NumLastLength - NumLength;       // 自动补零的个数
+            // 自动补 0 //
+            for (let i = 1; i <= ZeroMax; i++) {
+                Num = "0" + Num;
+            }
+        }
+    }
+    // 替换变量；替换变量；判断是否开启倒序；拼接结果；拼接结果 //
+    function CheckReverse() {
+        LinkReplace = BaseLink.replace(VarText, Num);      // 替换链接中的变量为当前值（VarText 替换为 Num）
+        if (GetReverse == false) {
+            // console.log("非倒序");
+            LinkResult = LinkResult + LinkReplace + "\n";  // 拼接结果
+        } else if (GetReverse == true) {
+            // console.log("倒序");
+            LinkResult = LinkReplace + "\n" + LinkResult;  // 拼接结果
+        }
+    }
+    // 运行 //
+    if (GetSettingType[0].checked == true) {
+        // 等差数列 //
+        // console.log("等差数列");
+        var GetFirst = parseInt(GetSettingA[1].value);     // 首项
+        var GetLength = parseInt(GetSettingA[2].value);    // 项数
+        var GetDiff = parseInt(GetSettingA[3].value);      // 公差
+        var GetZero = GetSettingA[4].checked;              // 补零
+        var GetReverse = GetSettingA[5].checked;           // 倒序
+        // 判断是否开启补零 //
+        if (GetZero == true) {
+            // 等差数列 补零 //
+            // console.log("等差数列 补零");
+            var Num;                                                // 当前项的值
+            var NumLength;                                          // 当前项的值的位数
+            var NumLast = GetFirst + (GetLength - 1) * GetDiff;     // 根据等差数列通项公式计算末项的值
+            var NumLastLength = NumLast.toString().length;          // 末项的值的位数
+            // console.log("末项的值：" + NumLast);
+            for (var i = 1; i <= GetLength; i++) {
+                Num = GetFirst + (i - 1) * GetDiff;                 // 根据等差数列通项公式计算当前项的值
+                NumLength = Num.toString().length;                  // 当前项的值的位数
+                AddZero();                                          // 若位数不足，自动补零
+                CheckReverse();                                     // 替换变量；判断是否开启倒序；拼接结果
+            }
+        } else if (GetZero == false) {
+            // 等差数列 不补零 //
+            // console.log("等差数列 不补零");
+            var Num;                                                // 当前项的值
+            for (var i = 1; i <= GetLength; i++) {
+                Num = GetFirst + (i - 1) * GetDiff;                 // 根据等差数列通项公式计算当前项的值
+                CheckReverse();                                     // 替换变量；判断是否开启倒序；拼接结果
+            }
+        }
+    } else if (GetSettingType[1].checked == true) {
+        // 等比数列 //
+        var GetFirst = parseInt(GetSettingB[1].value);              // 首项
+        var GetLength = parseInt(GetSettingB[2].value);             // 项数
+        var GetDiff = parseInt(GetSettingB[3].value);               // 公比
+        var GetZero = GetSettingB[4].checked;                       // 补零
+        var GetReverse = GetSettingB[5].checked;                    // 倒序
+        // 判断是否开启补零 //
+        if (GetZero == true) {
+            // 等比数列 补零 //
+            // console.log("等比数列 补零");
+            var Num;                                                     // 当前项的值
+            var NumLength;                                               // 当前项的值的位数
+            var NumLast = GetFirst * Math.pow(GetDiff, (GetLength - 1)); // 根据等比数列通项公式计算末项的值
+            var NumLastLength = NumLast.toString().length;               // 末项的值的位数
+            // console.log("末项的值：" + NumLast);
+            for (var i = 1; i <= GetLength; i++) {
+                Num = GetFirst * Math.pow(GetDiff, (i - 1));             // 根据等比数列通项公式计算当前项的值
+                NumLength = Num.toString().length;                       // 当前项的值的位数
+                AddZero();                                               // 若位数不足，自动补零
+                CheckReverse();                                          // 替换变量；判断是否开启倒序；拼接结果
+            }
+        } else if (GetZero == false) {
+            // 等比数列 不补零 //
+            // console.log("等比数列 不补零");
+            var Num;                                                // 当前项的值
+            for (var i = 1; i <= GetLength; i++) {
+                Num = GetFirst * Math.pow(GetDiff, (i - 1));        // 根据等比数列通项公式计算当前项的值
+                CheckReverse();                                     // 替换变量；判断是否开启倒序；拼接结果
+            }
+        }
+    } else if (GetSettingType[2].checked == true) {
+        // 字母变化 //
+        var GetFirst = GetSettingC[1].value.charCodeAt(0);          // 从（获取对应字母的 Unicode 编码）
+        var GetLast = GetSettingC[2].value.charCodeAt(0);           // 到（获取对应字母的 Unicode 编码）
+        var GetReverse = GetSettingC[3].checked;                    // 倒序
+        // console.log("从：" + GetFirst);
+        // console.log("到：" + GetLast);
+        // console.log("倒序：" + GetReverse);
+        if (GetFirst >= 65 && GetFirst <= 122 && GetLast >= 65 && GetLast <= 122) {
+            if (GetFirst < GetLast) {
+                for (var i = GetFirst; i <= GetLast; i++) {
+                    if (i >= 91 && i <= 96) {
+                        continue;                                   // 若为 [ \ ] ^ _ ` 则跳出循环
+                    }
+                    Num = String.fromCharCode(i);                   // 获取对应 Unicode 编码的字母
+                    CheckReverse();                                 // 替换变量；判断是否开启倒序；拼接结果
+                }
+            } else if (GetFirst > GetLast) {
+                GetResult.placeholder = "字母先后顺序有误。\n请按此顺序填写：\nA - Z a - z\n例如：\n从 a 到 d\n从 A 到 D\n从 X 到 g";
+            } else if (GetFirst == GetLast) {
+                GetResult.placeholder = "仅有 1 条链接，无需生成。";
+            } else {
+                GetResult.placeholder = "异常。";
+            }
+        } else {
+            GetResult.placeholder = "超出范围。";
+        }
+    } else {
+        // 异常 //
+        GetResult.placeholder = "类型选择有误";
+    }
+    GetResult.value = LinkResult;                           // 输出批量结果
+}
+
+function toolGenLinkClear() {
+    var GetResult = document.getElementById("tool-genlink-result");
+    GetResult.value = '';                                   // 清空结果
+    GetResult.placeholder = "结果";
+}
+
+/* --------------- */
+/* 运行 JavaScript */
+/* --------------- */
+
+function toolRunJSSubmit() {
+    GetCode = document.getElementById("tool-runjs-input");  // 代码输入框
+    eval(GetCode.value);                                    // 运行
+}
+
+function toolRunJSClear() {
+    GetCode = document.getElementById("tool-runjs-input");  // 代码输入框
+    GetCode.value = '';                                     // 清空
 }

docs/js/tool.min.js

@@ -0,0 +1,10 @@
+function toolCalculateSubmit(){GetInput=document.getElementById("tool-calculate-input");GetToFixed=document.getElementsByClassName("tool-calculate-tofixed")[0];GetResult=document.getElementsByClassName("tool-calculate-result")[0].getElementsByTagName("span")[0];GetCal=GetInput.value;GetCal=GetCal.replace(/π/g,"Math.PI");GetCal=GetCal.replace(/幂/g,"Math.pow");GetCal=GetCal.replace(/平方根/g,"Math.sqrt");if(GetToFixed.value>=0&&GetToFixed.value<=16){GetResult.innerText=eval(GetCal).toFixed(GetToFixed.value);}else{GetResult.innerText="保留位数有误（0 ~ 16 之间）";}}
+function toolCalculateClear(){GetInput=document.getElementById("tool-calculate-input");GetInput.value='';GetResult.innerText='';}
+function toolGenLinkSubmit(){var VarText="(*)";var BaseLink=document.getElementsByClassName("tool-genlink-link")[0].getElementsByTagName("input")[0].value;var GetSettingType=document.getElementsByName("genlink-settings");var GetSettingA=document.getElementsByClassName("genlink-settings-a")[0].getElementsByTagName("input");var GetSettingB=document.getElementsByClassName("genlink-settings-b")[0].getElementsByTagName("input");var GetSettingC=document.getElementsByClassName("genlink-settings-c")[0].getElementsByTagName("input");var GetResult=document.getElementById("tool-genlink-result");var LinkReplace='';var LinkResult='';function AddZero(){if(NumLength<NumLastLength){var ZeroMax=NumLastLength-NumLength;for(let i=1;i<=ZeroMax;i++){Num="0"+Num;}}}
+function CheckReverse(){LinkReplace=BaseLink.replace(VarText,Num);if(GetReverse==false){LinkResult=LinkResult+LinkReplace+"\n";}else if(GetReverse==true){LinkResult=LinkReplace+"\n"+LinkResult;}}
+if(GetSettingType[0].checked==true){var GetFirst=parseInt(GetSettingA[1].value);var GetLength=parseInt(GetSettingA[2].value);var GetDiff=parseInt(GetSettingA[3].value);var GetZero=GetSettingA[4].checked;var GetReverse=GetSettingA[5].checked;if(GetZero==true){var Num;var NumLength;var NumLast=GetFirst+(GetLength-1)*GetDiff;var NumLastLength=NumLast.toString().length;for(var i=1;i<=GetLength;i++){Num=GetFirst+(i-1)*GetDiff;NumLength=Num.toString().length;AddZero();CheckReverse();}}else if(GetZero==false){var Num;for(var i=1;i<=GetLength;i++){Num=GetFirst+(i-1)*GetDiff;CheckReverse();}}}else if(GetSettingType[1].checked==true){var GetFirst=parseInt(GetSettingB[1].value);var GetLength=parseInt(GetSettingB[2].value);var GetDiff=parseInt(GetSettingB[3].value);var GetZero=GetSettingB[4].checked;var GetReverse=GetSettingB[5].checked;if(GetZero==true){var Num;var NumLength;var NumLast=GetFirst*Math.pow(GetDiff,(GetLength-1));var NumLastLength=NumLast.toString().length;for(var i=1;i<=GetLength;i++){Num=GetFirst*Math.pow(GetDiff,(i-1));NumLength=Num.toString().length;AddZero();CheckReverse();}}else if(GetZero==false){var Num;for(var i=1;i<=GetLength;i++){Num=GetFirst*Math.pow(GetDiff,(i-1));CheckReverse();}}}else if(GetSettingType[2].checked==true){var GetFirst=GetSettingC[1].value.charCodeAt(0);var GetLast=GetSettingC[2].value.charCodeAt(0);var GetReverse=GetSettingC[3].checked;if(GetFirst>=65&&GetFirst<=122&&GetLast>=65&&GetLast<=122){if(GetFirst<GetLast){for(var i=GetFirst;i<=GetLast;i++){if(i>=91&&i<=96){continue;}
+Num=String.fromCharCode(i);CheckReverse();}}else if(GetFirst>GetLast){GetResult.placeholder="字母先后顺序有误。\n请按此顺序填写：\nA - Z a - z\n例如：\n从 a 到 d\n从 A 到 D\n从 X 到 g";}else if(GetFirst==GetLast){GetResult.placeholder="仅有 1 条链接，无需生成。";}else{GetResult.placeholder="异常。";}}else{GetResult.placeholder="超出范围。";}}else{GetResult.placeholder="类型选择有误";}
+GetResult.value=LinkResult;}
+function toolGenLinkClear(){var GetResult=document.getElementById("tool-genlink-result");GetResult.value='';GetResult.placeholder="结果";}
+function toolRunJSSubmit(){GetCode=document.getElementById("tool-runjs-input");eval(GetCode.value);}
+function toolRunJSClear(){GetCode=document.getElementById("tool-runjs-input");GetCode.value='';}

docs/tool.html

@@ -4,38 +4,89 @@
     <meta charset="utf-8"/>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
-    <title>Frost 网址导航 - 工具</title>
+    <link rel="shortcut icon" href="favicon.ico"/>
+    <title>Frost 网址导航 - 小工具</title>
     <link rel="stylesheet" href="css/tool.css"/>
 </head>
 <body>
     <div class="main">
-        <div class="tool-calculate">
+        <!-- 导航 -->
+        <div class="tool-nav">
+            <header>导航</header>
+            <div class="tool-nav-link">
+                <ul>
+                	<li><a href="#tool-calculate">简易计算</a></li>
+                	<li><a href="#tool-genlink">生成批量下载链接</a></li>
+                	<li><a href="#tool-runjs">运行 JavaScript</a></li>
+                </ul>
+            </div>
+        </div>
+        <!-- 简易计算 -->
+        <div id="tool-calculate" class="tool-calculate">
             <header>简易计算</header>
-            <textarea id="tool-calculate-input" rows="5" placeholder="请输入算式"></textarea>
+            <textarea id="tool-calculate-input" rows="6" placeholder="请输入算式（请使用“半角”符号）&#10;加：+ 减：- 乘：* 除：/&#10;多层括号：仅需使用 ()&#10;乘方运算：幂(底数, 指数)&#10;平方根：平方根(数值或算式)"></textarea>
             <div>保留小数点后 <input class="tool-calculate-tofixed" type="text" title="0 ~ 16 之间（默认：4）" value="4" /> 位数</div>
             <div class="tool-calculate-result">结果：<span></span></div>
             <div class="tool-button" onclick="toolCalculateSubmit()">计算</div>
             <div class="tool-button" onclick="toolCalculateClear()">清空</div>
         </div>
-        <div class="tool-genlink">
+        <!-- 生成批量下载链接 -->
+        <div id="tool-genlink" class="tool-genlink">
             <header>生成批量下载链接</header>
             <div class="tool-genlink-link">
-                网址：<input type="text" placeholder="变量用 (*) 表示" />
+                <b>网址：</b><input type="text" placeholder="变量用 (*) 表示" />
             </div>
+            <hr />
             <div class="tool-genlink-settings">
-                <input type="radio" name="genlink-settings" value="a" />
+                <div class="genlink-settings-a">
-                等差数列 首项：项数：公差：
+                    <input type="radio" name="genlink-settings" id="genlink-settings-a" checked />
-                <br />
+                    <label for="genlink-settings-a">等差数列</label>
-                <input type="radio" name="genlink-settings" value="b" />
+                    首项：<input type="text" value="1" />
-                等比数列 首项：项数：公比：
+                    项数：<input type="text" value="5" />
-                <br />
+                    公差：<input type="text" value="1" /><br />
-                <input type="radio" name="genlink-settings" value="c" />
+                    <input type="checkbox" name="genlink-settings-a-reverse" id="genlink-settings-a-zero" />
-                字母变化 从：到：
+                    <label for="genlink-settings-a-zero">补0（暂不支持负数）&nbsp;</label>
+                    <input type="checkbox" name="genlink-settings-a-reverse" id="genlink-settings-a-reverse" />
+                    <label for="genlink-settings-a-reverse">倒序</label>
+                </div>
+                <hr />
+                <div class="genlink-settings-b">
+                    <input type="radio" name="genlink-settings" id="genlink-settings-b" />
+                    <label for="genlink-settings-b">等比数列</label>
+                    首项：<input type="text" value="1" />
+                    项数：<input type="text" value="5" />
+                    公比：<input type="text" value="2" /><br />
+                    <input type="checkbox" name="genlink-settings-b-reverse" id="genlink-settings-b-zero"  />
+                    <label for="genlink-settings-b-zero">补0（暂不支持负数）&nbsp;</label>
+                    <input type="checkbox" name="genlink-settings-b-reverse" id="genlink-settings-b-reverse" />
+                    <label for="genlink-settings-b-reverse">倒序</label>
+                </div>
+                <hr />
+                <div class="genlink-settings-c">
+                    <input type="radio" name="genlink-settings" id="genlink-settings-c" />
+                    <label for="genlink-settings-c">字母变化</label>
+                    从：<input type="text" value="a" maxlength="1" />
+                    到：<input type="text" value="z" maxlength="1" /><br />
+                    <input type="checkbox" name="genlink-settings-c-reverse" id="genlink-settings-c-reverse" />
+                    <label for="genlink-settings-c-reverse">倒序</label>
+                </div>
             </div>
-            <div class="tool-button" onclick="">生成</div>
+            <hr />
+            <div class="tool-button" onclick="toolGenLinkSubmit()">生成</div>
+            <div class="tool-button" onclick="toolGenLinkClear()">清空</div>
             <textarea id="tool-genlink-result" rows="8" placeholder="结果"></textarea>
         </div>
+        <!-- 运行 JavaScript -->
+        <div id="tool-runjs" class="tool-runjs">
+            <header>运行 JavaScript</header>
+            <textarea id="tool-runjs-input" rows="6" placeholder="请输入 JavaScript 代码"></textarea>
+            <div class="tool-button" onclick="toolRunJSSubmit()">运行</div>
+            <div class="tool-button" onclick="toolRunJSClear()">清空</div>
+        </div>
     </div>
-    <script src="js/tool.js"></script>
+    <!-- 返回顶部 -->
+    <div class="to-top" onclick="document.body.scrollTop = 0; document.documentElement.scrollTop = 0;">▲</div>
+    <!-- JavaScript -->
+    <script src="js/tool.min.js"></script>
 </body>
 </html>