mirror of
https://gitee.com/coder-xiaomo/algorithm-visualization
synced 2025-09-06 21:01:39 +08:00
168 lines
6.5 KiB
HTML
168 lines
6.5 KiB
HTML
<!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>小墨 | 算法可视化 | Algorithm Visualization</title>
|
||
|
||
<!-- 如果使用webpack，请注释掉下面两行，通过 webpack 引入 -->
|
||
<link rel="stylesheet" href="./assets/css/index.css">
|
||
<link rel="stylesheet" href="./assets/css/svg.css">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="main">
|
||
<div id="container" class="container">
|
||
正在加载中，请稍候...
|
||
</div>
|
||
<div id="sidebar" style="display: none;">
|
||
<div id="control-div">
|
||
<div style="text-align: center;">
|
||
<input id="array-input" style="width: 100%; text-align: center;" type="text" value=""
|
||
oninput="updateListDataArray('array-sort-algorithm', { doNotAlert: true })" />
|
||
<input type="button" value="随便来一个" onclick="randomListDataArray('array-sort-algorithm')" />
|
||
</div>
|
||
<!-- 排序算法按钮 -->
|
||
</div>
|
||
<div id="console-div" style="display: none;">
|
||
<div id="console-current-algorithm"></div>
|
||
<div id="console-current-array"></div>
|
||
<div id="console-logs"></div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="header">
|
||
<h1>小墨 | 算法可视化</h1>
|
||
</div>
|
||
<div class="content">
|
||
<div class="content-left">
|
||
<div class="content-left-header">
|
||
<h2>算法可视化</h2>
|
||
</div>
|
||
<div class="content-left-body">
|
||
<ul>
|
||
<li><a href="">算法可视化</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="content-right">
|
||
<div class="content-right-header">
|
||
<h2>算法可视化</h2>
|
||
</div>
|
||
<div class="content-right-body">
|
||
<div class="content-right-body-header">
|
||
<h3>算法可视化</h3>
|
||
</div>
|
||
<div class="content-right-body-body">
|
||
<div id="container" class="container">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<p>
|
||
<a href="">算法可视化</a>
|
||
</p>
|
||
</div> -->
|
||
</div>
|
||
|
||
<script>
|
||
// CDN 资源加载失败时 fallback （使用本地js）
|
||
// refer: https://blog.csdn.net/weixin_44326389/article/details/104041963
|
||
|
||
function errorload(elem) { //cdn错误
|
||
if (elem.getAttribute('data-errorTimes') == 1) {
|
||
elem.onerror = null; // 执行完 onerror 事件后，置 οnerrοr = null 来清除 onerror 事件。
|
||
return;
|
||
}
|
||
elem.setAttribute('data-errorTimes', 1);
|
||
var _src = elem.getAttribute('local-src');
|
||
loadScript(_src, elem);
|
||
}
|
||
|
||
function loadScript(_src, prevEl) { //引入本地js
|
||
var _el = document.createElement('script');
|
||
_el.src = _src;
|
||
if (prevEl) {
|
||
prevEl.parentNode.insertBefore(_el, prevEl.nextSibling);
|
||
} else {
|
||
document.body.appendChild(_el);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 处理弱网情况下 d3, gsap 资源加载失败情况
|
||
*/
|
||
// 自定义原地等待函数
|
||
const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
|
||
|
||
// 检查对象是否为 null ，以判断资源是否加载成功
|
||
function checkObjectExist(typeofObject, retryCount, scriptId, localUrl) {
|
||
if (typeofObject === "undefined") {
|
||
if (retryCount[scriptId] == null) {
|
||
retryCount[scriptId] = 1
|
||
} else {
|
||
retryCount[scriptId]++
|
||
}
|
||
|
||
// if (retryCount[scriptId] === 3) {
|
||
// var scriptElement = document.getElementById(scriptId)
|
||
// loadScript(localUrl, scriptElement)
|
||
// if (scriptElement)
|
||
// scriptElement.parentNode.removeChild(scriptElement)
|
||
// }
|
||
|
||
if (retryCount[scriptId] === 4)
|
||
document.getElementById("container").innerHTML = "加载时间比预想的要长，若长时间无响应，请尝试刷新页面..."
|
||
|
||
if (retryCount[scriptId] === 8) {
|
||
alert(`网页脚本未能成功加载，长时间未加载成功请刷新重试`)
|
||
}
|
||
|
||
if (retryCount[scriptId] > 10) {
|
||
throw Error("多次尝试，但仍未成功，不再尝试")
|
||
}
|
||
console.log(scriptId)
|
||
console.error(`资源 [${scriptId}] 未能加载`, retryCount)
|
||
return false
|
||
}
|
||
return true
|
||
}
|
||
|
||
async function libLoadCheck() {
|
||
var retryCount = {}
|
||
// 如果没有成功加载，那么原地等待上方fallback加载本地js
|
||
while (!checkObjectExist(typeof (d3), retryCount, "script-d3", "./assets/lib/d3/7.4.4/d3.min.js"))
|
||
await sleep(1000)
|
||
while (!checkObjectExist(typeof (gsap), retryCount, "script-gsap", "./assets/lib/gsap/3.10.4/gsap.min.js"))
|
||
await sleep(1000)
|
||
loadScript("./assets/js/index.js")
|
||
console.log("基础资源加载成功")
|
||
}
|
||
setTimeout(libLoadCheck, 500)
|
||
</script>
|
||
|
||
<!-- D3.js refer: https://d3js.org/ -->
|
||
<script id="script-d3" src="https://cdn.staticfile.org/d3/7.4.4/d3.min.js"
|
||
local-src="./assets/lib/d3/7.4.4/d3.min.js" onerror="errorload(this);"></script>
|
||
|
||
<!-- GSAP refer: https://greensock.com/docs/v3/Installation -->
|
||
<script id="script-gsap" src="https://cdn.staticfile.org/gsap/3.10.4/gsap.min.js"
|
||
local-src="./assets/lib/gsap/3.10.4/gsap.min.js" onerror="errorload(this);"></script>
|
||
|
||
<!-- class -->
|
||
<script id="script-class" src="./assets/js/class.js"></script>
|
||
|
||
<!-- 排序算法 -->
|
||
<script src="./assets/js/algorithm/sort.js"></script>
|
||
|
||
<!-- 主script -->
|
||
<!-- <script src="./assets/js/index.js"></script> -->
|
||
|
||
<!-- 算法测试 -->
|
||
<!-- <script src="./assets/js/algorithm/test.js"></script> -->
|
||
</body>
|
||
|
||
</html> |