mirror of
https://gitee.com/coder-xiaomo/algorithm-visualization
synced 2025-01-10 19:58:18 +08:00
实现 归并排序算法（不要合分支）；动画展示不好展示；弹出元素到新的数组部分代码未完成
This commit is contained in:
parent
b65be3051b
commit
d30ceef3a7
File diff suppressed because it is too large
Load Diff
@ -1,72 +1,73 @@
|
||||
|
||||
/**
|
||||
* 排序算法测试
|
||||
*/
|
||||
|
||||
/**
|
||||
* 创建一个随机数数组
|
||||
* @returns
|
||||
*/
|
||||
function getRandomData(count = 20) {
|
||||
var randomData = []
|
||||
for (let i = 0; i < count; i++) // 生成随机数
|
||||
randomData.push(Math.ceil(Math.random() * 100 - 50))
|
||||
return randomData
|
||||
}
|
||||
var data = [
|
||||
[],
|
||||
[-1],
|
||||
[1, 2],
|
||||
[1, 2, 3, 4, 5, 6, 7, 8],
|
||||
[8, 7, 6, 5, 4, 3, 2, 1],
|
||||
[1, 1, 1, 1, 1, 1, 1],
|
||||
[5, 8, 7, 4, 3, 1, 6, 2, 6, 5],
|
||||
[47, 11, 50, 13, 16, 49, 8, 9, 38, 27, 20],
|
||||
// getRandomData(6),
|
||||
]
|
||||
var check = [
|
||||
[],
|
||||
[-1],
|
||||
[1, 2],
|
||||
[1, 2, 3, 4, 5, 6, 7, 8],
|
||||
[1, 2, 3, 4, 5, 6, 7, 8],
|
||||
[1, 1, 1, 1, 1, 1, 1],
|
||||
[1, 2, 3, 4, 5, 5, 6, 6, 7, 8],
|
||||
[8, 9, 11, 13, 16, 20, 27, 38, 47, 49, 50],
|
||||
// null
|
||||
]
|
||||
|
||||
var sortAlgorithm = {
|
||||
quicksort: new QuickSort(animation),
|
||||
bubblesort: new BubbleSort(animation),
|
||||
selectionSort: new SelectionSort(animation),
|
||||
insertionSort: new InsertionSort(animation),
|
||||
}
|
||||
|
||||
// 遍历每一种算法
|
||||
Object.values(sortAlgorithm).forEach(sortAlgo => {
|
||||
// 输出调试信息
|
||||
console.log("算法信息", sortAlgo.info())
|
||||
data.forEach(element => {
|
||||
// 将数组元素进行深拷贝
|
||||
var input = JSON.parse(JSON.stringify(element))
|
||||
// 进行排序
|
||||
var result = sortAlgo.sort(input)
|
||||
console.log("before", element, "after", result)
|
||||
// 与结果进行对比，判断是否正确
|
||||
if (data.indexOf(element) > -1) {
|
||||
var rightSortResult = check[data.indexOf(element)];
|
||||
if (rightSortResult) {
|
||||
if (JSON.stringify(rightSortResult) !== JSON.stringify(result)) {
|
||||
console.warn("👆结果不匹配！正确结果为", rightSortResult)
|
||||
} else {
|
||||
console.info("👆正确")
|
||||
}
|
||||
} else {
|
||||
console.log("👆缺少正确答案，跳过")
|
||||
}
|
||||
}
|
||||
});
|
||||
// 输出一个空行，便于观察
|
||||
console.log("-----------------------------------------------")
|
||||
});
|
||||
|
||||
/**
|
||||
* 排序算法测试
|
||||
*/
|
||||
|
||||
/**
|
||||
* 创建一个随机数数组
|
||||
* @returns
|
||||
*/
|
||||
function getRandomData(count = 20) {
|
||||
var randomData = []
|
||||
for (let i = 0; i < count; i++) // 生成随机数
|
||||
randomData.push(Math.ceil(Math.random() * 100 - 50))
|
||||
return randomData
|
||||
}
|
||||
var data = [
|
||||
[],
|
||||
[-1],
|
||||
[1, 2],
|
||||
[1, 2, 3, 4, 5, 6, 7, 8],
|
||||
[8, 7, 6, 5, 4, 3, 2, 1],
|
||||
[1, 1, 1, 1, 1, 1, 1],
|
||||
[5, 8, 7, 4, 3, 1, 6, 2, 6, 5],
|
||||
[47, 11, 50, 13, 16, 49, 8, 9, 38, 27, 20],
|
||||
// getRandomData(6),
|
||||
]
|
||||
var check = [
|
||||
[],
|
||||
[-1],
|
||||
[1, 2],
|
||||
[1, 2, 3, 4, 5, 6, 7, 8],
|
||||
[1, 2, 3, 4, 5, 6, 7, 8],
|
||||
[1, 1, 1, 1, 1, 1, 1],
|
||||
[1, 2, 3, 4, 5, 5, 6, 6, 7, 8],
|
||||
[8, 9, 11, 13, 16, 20, 27, 38, 47, 49, 50],
|
||||
// null
|
||||
]
|
||||
|
||||
var sortAlgorithm = {
|
||||
quicksort: new QuickSort(animation),
|
||||
bubblesort: new BubbleSort(animation),
|
||||
selectionSort: new SelectionSort(animation),
|
||||
insertionSort: new InsertionSort(animation),
|
||||
mergeSort: new MergeSort(animation),
|
||||
}
|
||||
|
||||
// 遍历每一种算法
|
||||
Object.values(sortAlgorithm).forEach(sortAlgo => {
|
||||
// 输出调试信息
|
||||
console.log("算法信息", sortAlgo.info())
|
||||
data.forEach(element => {
|
||||
// 将数组元素进行深拷贝
|
||||
var input = JSON.parse(JSON.stringify(element))
|
||||
// 进行排序
|
||||
var result = sortAlgo.sort(input)
|
||||
console.log("before", element, "after", result)
|
||||
// 与结果进行对比，判断是否正确
|
||||
if (data.indexOf(element) > -1) {
|
||||
var rightSortResult = check[data.indexOf(element)];
|
||||
if (rightSortResult) {
|
||||
if (JSON.stringify(rightSortResult) !== JSON.stringify(result)) {
|
||||
console.warn("👆结果不匹配！正确结果为", rightSortResult)
|
||||
} else {
|
||||
console.info("👆正确")
|
||||
}
|
||||
} else {
|
||||
console.log("👆缺少正确答案，跳过")
|
||||
}
|
||||
}
|
||||
});
|
||||
// 输出一个空行，便于观察
|
||||
console.log("-----------------------------------------------")
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
168
src/index.html
168
src/index.html
@ -1,85 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>算法可视化 | 小墨AlGO</title>
|
||||
|
||||
<meta name="description" content="小墨AlGO，可视化算法，让算法更简单！">
|
||||
|
||||
<!-- 不允许浏览器缓存此页面，便于后期页面升级 -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=8">
|
||||
<meta http-equiv="Expires" content="0">
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Cache-control" content="no-cache">
|
||||
<meta http-equiv="Cache" content="no-cache">
|
||||
|
||||
<!-- 如果使用webpack，请注释掉下面两行，通过 webpack 引入 -->
|
||||
<link rel="stylesheet" href="./assets/css/index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="main">
|
||||
<div id="header"></div>
|
||||
<div id="container" class="container">
|
||||
正在加载中，请稍候...
|
||||
</div>
|
||||
<div id="sidebar" style="display: none;">
|
||||
<div id="control-div">
|
||||
<div style="text-align: center;">
|
||||
<label>
|
||||
请输入数组元素，以逗号分隔（中英文逗号均可）
|
||||
<input id="array-input" style="width: 100%; text-align: center;" type="text" value="" />
|
||||
</label>
|
||||
<input id="getRandomBtn" type="button" value="随便来一个" />
|
||||
</div>
|
||||
<!-- 排序算法按钮 -->
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 header -->
|
||||
<script defer src="./assets/js/header.js"></script>
|
||||
|
||||
<!-- 深色模式 -->
|
||||
<script defer src="./assets/js/darkmode.js"></script>
|
||||
|
||||
<!-- D3.js refer: https://d3js.org/ -->
|
||||
<script src="https://cdn.staticfile.org/d3/7.4.4/d3.min.js"></script>
|
||||
|
||||
<!-- GSAP refer: https://greensock.com/docs/v3/Installation -->
|
||||
<script src="https://cdn.staticfile.org/gsap/3.10.4/gsap.min.js"></script>
|
||||
|
||||
<script>
|
||||
function documentWriteScript(src) {
|
||||
document.write('<' + 'script src="' + src + '"><' + '/script>')
|
||||
}
|
||||
!d3 && documentWriteScript("./assets/lib/d3/7.4.4/d3.min.js")
|
||||
!gsap && documentWriteScript("./assets/lib/gsap/3.10.4/gsap.min.js")
|
||||
</script>
|
||||
|
||||
<!-- class -->
|
||||
<script defer id="script-class" src="./assets/js/class.js"></script>
|
||||
|
||||
<!-- 排序算法 -->
|
||||
<script defer src="./assets/js/algorithm/sort.js"></script>
|
||||
|
||||
<!-- 主script -->
|
||||
<script defer src="./assets/js/index.js"></script>
|
||||
|
||||
<!-- 算法测试 -->
|
||||
<!-- <script src="./assets/js/algorithm/test.js"></script> -->
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>算法可视化 | 小墨AlGO</title>
|
||||
|
||||
<meta name="description" content="小墨AlGO，可视化算法，让算法更简单！">
|
||||
|
||||
<!-- 不允许浏览器缓存此页面，便于后期页面升级 -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=8">
|
||||
<meta http-equiv="Expires" content="0">
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Cache-control" content="no-cache">
|
||||
<meta http-equiv="Cache" content="no-cache">
|
||||
|
||||
<!-- 如果使用webpack，请注释掉下面两行，通过 webpack 引入 -->
|
||||
<link rel="stylesheet" href="./assets/css/index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="main">
|
||||
<div id="header"></div>
|
||||
<div id="container" class="container">
|
||||
正在加载中，请稍候...
|
||||
</div>
|
||||
<div id="sidebar" style="display: none;">
|
||||
<div id="control-div">
|
||||
<div style="text-align: center;">
|
||||
<label>
|
||||
请输入数组元素，以逗号分隔（中英文逗号均可）
|
||||
<input id="array-input" style="width: 100%; text-align: center;" type="text" value="" />
|
||||
</label>
|
||||
<input id="getRandomBtn" type="button" value="随便来一个" />
|
||||
</div>
|
||||
<!-- 排序算法按钮 -->
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 header -->
|
||||
<script defer src="./assets/js/header.js"></script>
|
||||
|
||||
<!-- 深色模式 -->
|
||||
<script defer src="./assets/js/darkmode.js"></script>
|
||||
|
||||
<!-- D3.js refer: https://d3js.org/ -->
|
||||
<script src="https://cdn.staticfile.org/d3/7.4.4/d3.min.js"></script>
|
||||
|
||||
<!-- GSAP refer: https://greensock.com/docs/v3/Installation -->
|
||||
<script src="https://cdn.staticfile.org/gsap/3.10.4/gsap.min.js"></script>
|
||||
|
||||
<script>
|
||||
function documentWriteScript(src) {
|
||||
document.write('<' + 'script src="' + src + '"><' + '/script>')
|
||||
}
|
||||
!d3 && documentWriteScript("./assets/lib/d3/7.4.4/d3.min.js")
|
||||
!gsap && documentWriteScript("./assets/lib/gsap/3.10.4/gsap.min.js")
|
||||
</script>
|
||||
|
||||
<!-- class -->
|
||||
<script defer id="script-class" src="./assets/js/class.js"></script>
|
||||
|
||||
<!-- 排序算法 -->
|
||||
<script defer src="./assets/js/algorithm/sort.js"></script>
|
||||
|
||||
<!-- 主script -->
|
||||
<script defer src="./assets/js/index.js"></script>
|
||||
|
||||
<!-- 算法测试 -->
|
||||
<!-- <script defer src="./assets/js/algorithm/test.js"></script> -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user