From 850ffdc46165fc8db00ca468a8339286db0a990b 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: Wed, 18 May 2022 22:30:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=94=A8=E6=88=B7=E8=BE=93?=
=?UTF-8?q?=E5=85=A5=E6=95=B0=E7=BB=84=E5=92=8C=E9=9A=8F=E6=9C=BA=E7=94=9F?=
=?UTF-8?q?=E6=88=90=E6=95=B0=E7=BB=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/css/index.css | 2 -
src/assets/js/algorithm/sort.js | 2 +-
src/assets/js/class.js | 2 +-
src/assets/js/index.js | 93 ++++++++++++++++++++++++---------
src/index.html | 6 ++-
5 files changed, 76 insertions(+), 29 deletions(-)
diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 8ba0ebc..1d0237b 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -15,8 +15,6 @@ body,
border: 1px solid #999;
border-radius: 5px;
box-shadow: 0 0 5px #999;
- /* width: 700px; */
- /* height: 350px; */
}
#sidebar {
diff --git a/src/assets/js/algorithm/sort.js b/src/assets/js/algorithm/sort.js
index 2be0226..e878289 100644
--- a/src/assets/js/algorithm/sort.js
+++ b/src/assets/js/algorithm/sort.js
@@ -18,7 +18,7 @@ class Sort {
static animation = null
constructor(animation) {
this.animation = animation
- console.log("animation", animation)
+ console.log(`初始化 ${this.info()['name']}`)
}
info() {
diff --git a/src/assets/js/class.js b/src/assets/js/class.js
index 78a474e..ffb0153 100644
--- a/src/assets/js/class.js
+++ b/src/assets/js/class.js
@@ -172,7 +172,7 @@ class Shape {
}
})
}
- console.log(fragment.customAttr)
+ // console.log(fragment.customAttr)
// 元素不能设置 width 和 height
diff --git a/src/assets/js/index.js b/src/assets/js/index.js
index 282f088..5723fc5 100644
--- a/src/assets/js/index.js
+++ b/src/assets/js/index.js
@@ -5,7 +5,7 @@ var settings = {
debugMode: false,
outerSize: { // 不带单位
width: 800,
- height: 600
+ height: 450
},
innerSize: { // 不带单位，通过 outerSize 和 margin 计算得到
width: null,
@@ -60,13 +60,69 @@ settings.oneUnit.longitudinal = settings.innerSize.height / 100;
console.log("settings", settings)
+
+// 绘制数组
+function initArray(elementId, listData) {
+ let fragment = shape.getLinkedListFragment(elementId, listData, {
+ x: 100,
+ y: 100,
+ width: "100px",
+ height: "100px",
+ })
+
+ console.log(fragment)
+ workSpace.primaryCanvas.html("")
+ workSpace.primaryCanvas.node().appendChild(fragment)
+ document.getElementById(elementId).customAttr = fragment.customAttr
+}
+
// 初始化
var workSpace = new WorkSpace(settings)
var shape = new Shape(workSpace)
var animation = new VectorAnimation(workSpace)
+var listData // = [47, 11, 50, 13, 16, 49, 8, 9, 38, 27, 20] // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
+function updateListDataInput() {
+ document.getElementById("array-input").value = listData.join("，")
+}
+function updateListDataArray(elementId, { doNotAlert = false }) {
+ var val = document.getElementById("array-input").value
+ try {
+ var preList = val.replaceAll("，", ",").split(",")
+ listData = []
+ preList.forEach(element => {
+ if (element.trim() === "" || isNaN(element))
+ return
+ listData.push(Number(element))
+ });
+ // console.log(preList, listData)
+ initArray(elementId, listData)
+ } catch (err) {
+ console.log(err)
+ if (!doNotAlert)
+ alert("输入不正确，请检查！")
+ return false
+ }
+ return true
+}
+function randomListDataArray(elementId) {
+ function getRandom(length) {
+ return Math.floor(Math.random() * length); // 可均衡获取 0 到 length-1 的随机整数。
+ }
+ // 获取一个 6 - 12 以内的随机数
+ var len = 6 + getRandom(13 - 6)
+
+ listData = []
+ for (let i = 0; i < len; i++) {
+ listData.push(getRandom(51))
+ }
+ updateListDataInput()
+ updateListDataArray(elementId, { doNotAlert: false })
+}
+
+// 网页加载完毕初始化事件
function initialize() {
- var elementId = "ele8"
+ var elementId = "array-sort-algorithm"
let controlDiv = document.getElementById("control-div")
var sortClassList = getSortClassList();
@@ -79,25 +135,34 @@ function initialize() {
let ctrlBtn = document.createElement("button")
ctrlBtn.innerHTML = sortClassInfo['name']
ctrlBtn.onclick = function () {
+ // 点击排序算法按钮
+ if (!updateListDataArray(elementId, { doNotAlert: false }))
+ 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)
}
controlDiv.appendChild(DOMFragment)
+ // 生成一个随机数组
+ randomListDataArray(elementId)
+
// 显示 siderbar
d3.select("#sidebar").style("display", "")
}
initialize()
-// 临时输出
+// 输出
function consoleLog(data) {
let consoleList = settings.console.consoleList
if (data) {
@@ -115,7 +180,7 @@ function consoleClear() {
settings.console.consoleList = []
consoleLog()
}
-
+// 展示当前数组
function displayCurrentArray(array) {
let dom = []
for (let index = 0; index < array.length; index++) {
@@ -193,24 +258,4 @@ function displayCurrentArray(array) {
// shape.addNode("ele7", 300, 200, "20px", "20px", "文本")
-var listData = [47, 11, 50, 13, 16, 49, 8, 9, 38, 27, 20] // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
-let fragment = shape.getLinkedListFragment("ele8", listData, {
- x: 100,
- y: 100,
- width: "100px",
- height: "100px",
-})
-
-console.log(fragment)
-workSpace.primaryCanvas.node().appendChild(fragment)
-document.getElementById("ele8").customAttr = fragment.customAttr
-
-function getRandom(length) {
- return Math.floor(Math.random() * length); // 可均衡获取 0 到 length-1 的随机整数。
-}
-
-// for (let i = 0; i < 10; i++) {
-// var id = "ele8"
-// animation.swapLinkedListItems(id, [getRandom(listData.length), getRandom(listData.length)])
-// }
diff --git a/src/index.html b/src/index.html
index 33bbd1d..f6c0342 100644
--- a/src/index.html
+++ b/src/index.html
@@ -19,7 +19,11 @@