From 9ddeee28e7195ffeca23f1b3d500c114ed91ccd5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E5=B0=8F=E5=A2=A8?= <2291200076@qq.com> Date: Sun, 19 Jun 2022 18:34:56 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AE=97=E6=B3=95=E6=8C=89=E9=92=AE=E6=94=B9?= =?UTF-8?q?=E4=B8=BA=E4=B8=8B=E6=8B=89=E6=A1=86=EF=BC=9B=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E7=AE=97=E6=B3=95=E8=8B=B1=E6=96=87=E5=90=8D=E7=A7=B0=EF=BC=9B?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/index.css | 10 ++++- src/assets/js/algorithm/sort.js | 16 ++++++-- src/assets/js/class.js | 66 +++++++++++++++++++++------------ 3 files changed, 63 insertions(+), 29 deletions(-) diff --git a/src/assets/css/index.css b/src/assets/css/index.css index 5955c32..fa0b9f4 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -47,16 +47,20 @@ body { --color-dark: #141414; --color-dark-alpha: rgba(0, 0, 0, 0.1); --color-dark-filter: brightness(0.5); + --color-dark-console: #323232; - --color-light: #efefef; + /* --color-light: #efefef; */ + --color-light: #b4b4b4; --color-light-alpha: rgba(255, 255, 255, 0.9); --color-light-filter: none; + --color-light-console: #cccccc; --background: #efefef; --text-color: #141414; --button-background: var(--color-dark); --button-color: var(--color-light); --border-color: var(--color-dark-alpha); + --console-background: var(--color-light-console); --filter: var(--color-light-filter); } @@ -71,6 +75,7 @@ body { --button-background: var(--color-light); --button-color: var(--color-dark); --border-color: var(--color-light-alpha); + --console-background: var(--color-dark-console); --filter: var(--color-dark-filter); } } @@ -81,6 +86,7 @@ body { --button-background: var(--color-light-alpha); --button-color: var(--color-dark); --border-color: var(--color-light-alpha); + --console-background: var(--color-dark-console); --filter: var(--color-dark-filter); } @@ -139,7 +145,7 @@ body { padding: 0 15px; height: 100px; width: 300px; - background-color: #cccccc; + background-color: var(--console-background); overflow-y: overlay; border-radius: 10px; } diff --git a/src/assets/js/algorithm/sort.js b/src/assets/js/algorithm/sort.js index 31f957c..2d3cc1f 100644 --- a/src/assets/js/algorithm/sort.js +++ b/src/assets/js/algorithm/sort.js @@ -98,6 +98,7 @@ class QuickSort extends Sort { info() { return { name: "快速排序算法", + enName: "Quick Sort", available: true } } @@ -173,6 +174,7 @@ class BubbleSort extends Sort { info() { return { name: "冒泡排序算法", + enName: "Bubble Sort", available: true } } @@ -235,6 +237,7 @@ class SelectionSort extends Sort { info() { return { name: "选择排序算法", + enName: "Selection Sort", available: true } } @@ -289,6 +292,7 @@ class InsertionSort extends Sort { info() { return { name: "插入排序算法", + enName: "Insertion Sort", available: true } } @@ -347,7 +351,8 @@ class MergeSort extends Sort { info() { return { - name: "归并排序算法" + name: "归并排序算法", + enName: "Merge Sort", } } @@ -388,7 +393,8 @@ class RandomQuickSort extends Sort { info() { return { - name: "随机快速排序算法" + name: "随机快速排序算法", + enName: "Random Quick Sort", } } @@ -429,7 +435,8 @@ class CountingSort extends Sort { info() { return { - name: "计数排序算法" + name: "计数排序算法", + enName: "Counting Sort", } } @@ -470,7 +477,8 @@ class RadixSort extends Sort { info() { return { - name: "基数排序算法" + name: "基数排序算法", + enName: "Radix Sort", } } diff --git a/src/assets/js/class.js b/src/assets/js/class.js index 5346db9..949d215 100644 --- a/src/assets/js/class.js +++ b/src/assets/js/class.js @@ -48,9 +48,13 @@ class ArrayVi extends ViBase { // 网页加载完毕初始化事件 initialize({ elementId }) { let controlDiv = document.getElementById("control-div") + controlDiv.style.textAlign = "center" + var sortClassList = getSortClassList(); console.log(sortClassList); var DOMFragment = document.createDocumentFragment() + + var selector = document.createElement("select") for (let i = 0; i < sortClassList.length; i++) { const sortClass = new sortClassList[i](animation) const sortClassInfo = sortClass.info() @@ -59,30 +63,46 @@ class ArrayVi extends ViBase { if (!sortClassInfo['available']) continue - let that = this - let ctrlBtn = document.createElement("button") - ctrlBtn.innerHTML = sortClassInfo['name'] - ctrlBtn.onclick = function () { - // 点击排序算法按钮 - // if (!that.updateListDataArray(elementId, { doNotAlert: false })) - // return - if (!that.listData || that.listData.length == 0) { - alert("数组为空") - return - } - - // 隐藏一些东西，显示一些东西 - controlDiv.style.display = 'none' - d3.select("#console-div") - .style("display", "") - d3.select("#console-current-algorithm") - .style("text-align", "center") - .html(sortClassInfo['name']) - - sortClass.doSortWithAnimation(elementId) - } - DOMFragment.appendChild(ctrlBtn) + let option = document.createElement("option") + option.value = sortClassInfo['name'] + option.innerText = sortClassInfo['name'] + selector.appendChild(option) } + DOMFragment.appendChild(selector) + + let ctrlBtn = document.createElement("button") + ctrlBtn.innerHTML = "开始排序" + let that = this + ctrlBtn.onclick = function () { + // 点击排序算法按钮 + // if (!that.updateListDataArray(elementId, { doNotAlert: false })) + // return + if (!that.listData || that.listData.length == 0) { + alert("数组为空") + return + } + + // 隐藏一些东西，显示一些东西 + controlDiv.style.display = 'none' + d3.select("#console-div") + .style("display", "") + d3.select("#console-current-algorithm") + .style("text-align", "center") + .html(selector.value/*sortClassInfo['name']*/) + + // 找到对应的算法，然后开始排序 + for (let i = 0; i < sortClassList.length; i++) { + const sortClass = new sortClassList[i](animation) + const sortClassInfo = sortClass.info() + + if (sortClassInfo['name'] === selector.value) { + sortClass.doSortWithAnimation(elementId) + break + } + } + } + DOMFragment.appendChild(ctrlBtn) + controlDiv.appendChild(DOMFragment) // 生成一个随机数组