mirror of
https://gitee.com/coder-xiaomo/algorithm-visualization
synced 2025-01-10 19:58:18 +08:00
算法按钮改为下拉框；添加算法英文名称；样式调整
This commit is contained in:
parent
fd0794158d
commit
9ddeee28e7
@ -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;
|
||||
}
|
||||
|
||||
@ -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",
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
// 生成一个随机数组
|
||||
|
||||
Loading…
Reference in New Issue
Block a user