排序状态下添加停止按钮；样式小调整

README.md

@@ -4,7 +4,7 @@
 
 
 
-> webpack框架真难调教，调了好久才弄得勉强能用了，不过应该还是有哪里没有调整对，所以暂时先痛webpack开发了，后面有心情再来研究
+> webpack框架真难调教，调了好久才弄得勉强能用了，不过应该还是有哪里没有调整对，所以暂时先不鼓捣webpack开发了，后面有心情再来研究
 
 ### 基本框架
 

src/assets/css/index.css

@@ -46,14 +46,16 @@ body {
   --color-mode: "light";
   --color-dark: #141414;
   --color-dark-alpha: rgba(0, 0, 0, 0.1);
-  --color-dark-filter: brightness(0.5);
   --color-dark-console: #323232;
+  --color-dark-text-input-filter: invert(1);
+  --color-dark-filter: brightness(0.5);
 
   /* --color-light: #efefef; */
   --color-light: #b4b4b4;
   --color-light-alpha: rgba(255, 255, 255, 0.9);
-  --color-light-filter: none;
   --color-light-console: #cccccc;
+  --color-light-text-input-filter: initial;
+  --color-light-filter: none;
 
   --background: #efefef;
   --text-color: #141414;
@@ -61,6 +63,7 @@ body {
   --button-color: var(--color-light);
   --border-color: var(--color-dark-alpha);
   --console-background: var(--color-light-console);
+  --text-input-filter: var(--color-light-text-input-filter);
   --filter: var(--color-light-filter);
 }
 
@@ -76,6 +79,7 @@ body {
     --button-color: var(--color-dark);
     --border-color: var(--color-light-alpha);
     --console-background: var(--color-dark-console);
+    --text-input-filter: var(--color-dark-text-input-filter);
     --filter: var(--color-dark-filter);
   }
 }
@@ -87,6 +91,7 @@ body {
   --button-color: var(--color-dark);
   --border-color: var(--color-light-alpha);
   --console-background: var(--color-dark-console);
+  --text-input-filter: var(--color-dark-text-input-filter);
   --filter: var(--color-dark-filter);
 }
 
@@ -96,6 +101,13 @@ body {
   transition: background 500ms ease-in-out, color 200ms ease;
 }
 
+input[type="text"],
+input[type="button"],
+button,
+select {
+  filter: var(--text-input-filter);
+}
+
 /* 导航栏 */
 #header {
   width: 100%;

src/assets/js/index.js

@@ -46,8 +46,8 @@ var settings = {
         }
     },
     console: {
-        maxLine: -1,
+        maxLine: -1,        // 最大输出的行数，超出后较早的记录将被丢掉  -1 表示不限制
-        consoleList: [], // 输出列表的数组，不要修改
+        consoleList: [],    // 输出列表的数组，不要修改
     }
 }
 

src/index.html

@@ -31,6 +31,9 @@
                 <!-- 排序算法按钮 -->
             </div>
             <div id="console-div" style="display: none;">
+                <div style="text-align: center;">
+                    <input type="button" value="停止排序" onclick="location.reload();" />
+                </div>
                 <div id="console-current-algorithm"></div>
                 <div id="console-current-array"></div>
                 <div id="console-logs"></div>