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