Skip to content

Commit 17bf832

Browse files
houbbhoubb
committed
add
0 parents  commit 17bf832

File tree

3 files changed

+278
-0
lines changed

3 files changed

+278
-0
lines changed

‎README.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# 算法资源可视化
2+
3+
作用：用于一些算法的过程可视化，直观理解算法。
4+
5+
# 配套资料
6+
7+
## leetcode 算法
8+
9+
> [leetcode-visual 资源可视化](https://github.com/houbb/leetcode-visual)
10+
11+
12+
> [leetcode 算法实现](https://github.com/houbb/leetcode)

‎binary-search-basic.html‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Binary Search Visualizer</title>
6+
<style>
7+
body {
8+
font-family: sans-serif;
9+
padding: 20px;
10+
}
11+
.array-box {
12+
display: flex;
13+
gap: 10px;
14+
margin: 20px 0;
15+
flex-wrap: wrap;
16+
}
17+
.item {
18+
width: 40px;
19+
height: 40px;
20+
display: flex;
21+
align-items: center;
22+
justify-content: center;
23+
background: lightgray;
24+
border: 1px solid #999;
25+
border-radius: 5px;
26+
transition: all 0.3s;
27+
}
28+
.item.left {
29+
background: #add8e6;
30+
}
31+
.item.right {
32+
background: #f9c2ff;
33+
}
34+
.item.mid {
35+
background: #90ee90;
36+
font-weight: bold;
37+
}
38+
#log {
39+
white-space: pre-wrap;
40+
background: #f4f4f4;
41+
padding: 10px;
42+
border-radius: 5px;
43+
margin-top: 15px;
44+
height: 120px;
45+
overflow-y: auto;
46+
font-family: monospace;
47+
}
48+
input, button {
49+
margin: 5px 0;
50+
}
51+
</style>
52+
</head>
53+
<body>
54+
<h2>🔍 二分查找可视化</h2>
55+
56+
<label>输入有序数组（逗号分隔）:</label><br>
57+
<input id="arrayInput" type="text" value="1,3,5,7,9,11,13"><br>
58+
59+
<label>目标值 target:</label><br>
60+
<input id="targetInput" type="number" value="7"><br>
61+
62+
<label>步骤间隔时间（毫秒）:</label><br>
63+
<input id="sleepTimeInput" type="number" value="1000"><br>
64+
65+
<button onclick="startSearch()">开始搜索</button>
66+
67+
<div class="array-box" id="arrayBox"></div>
68+
69+
<div><strong>步骤日志：</strong></div>
70+
<div id="log"></div>
71+
72+
<script>
73+
let nums = [], target = 0, log = '', step = 0, sleepTime = 1000;
74+
75+
function logStep(msg) {
76+
log += msg + "\n";
77+
document.getElementById('log').innerText = log;
78+
}
79+
80+
function sleep(ms) {
81+
return new Promise(resolve => setTimeout(resolve, ms));
82+
}
83+
84+
async function startSearch() {
85+
// 初始化
86+
step = 0;
87+
log = '';
88+
document.getElementById('log').innerText = '';
89+
90+
const arrStr = document.getElementById('arrayInput').value.trim();
91+
const targetStr = document.getElementById('targetInput').value.trim();
92+
const sleepStr = document.getElementById('sleepTimeInput').value.trim();
93+
94+
nums = arrStr.split(',').map(x => parseInt(x.trim())).filter(x => !isNaN(x));
95+
target = parseInt(targetStr);
96+
sleepTime = parseInt(sleepStr);
97+
98+
if (!nums.length || isNaN(target)) {
99+
alert('请输入有效的数组和目标值！');
100+
return;
101+
}
102+
103+
if (isNaN(sleepTime) || sleepTime < 0) {
104+
alert('请输入有效的 sleep 毫秒值（例如 1000 表示 1秒）');
105+
return;
106+
}
107+
108+
renderArray(-1, -1, -1); // 初始渲染
109+
110+
let left = 0, right = nums.length - 1;
111+
while (left <= right) {
112+
const mid = Math.floor((left + right) / 2);
113+
renderArray(left, right, mid);
114+
logStep(`Step ${++step}: left=${left}, right=${right}, mid=${mid}, value=${nums[mid]}`);
115+
116+
await sleep(sleepTime);
117+
118+
if (nums[mid] === target) {
119+
logStep(`✅ 找到 target=${target}，位置：${mid}`);
120+
renderArray(left, right, mid);
121+
return;
122+
} else if (nums[mid] < target) {
123+
left = mid + 1;
124+
} else {
125+
right = mid - 1;
126+
}
127+
}
128+
129+
logStep(`❌ 未找到 target=${target}`);
130+
}
131+
132+
function renderArray(left, right, mid) {
133+
const box = document.getElementById('arrayBox');
134+
box.innerHTML = '';
135+
nums.forEach((num, i) => {
136+
const div = document.createElement('div');
137+
div.className = 'item';
138+
if (i === mid) div.classList.add('mid');
139+
else if (i === left) div.classList.add('left');
140+
else if (i === right) div.classList.add('right');
141+
div.innerText = num;
142+
box.appendChild(div);
143+
});
144+
}
145+
</script>
146+
</body>
147+
</html>

‎index.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html lang="zh">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>算法可视化资源索引</title>
6+
<style>
7+
body {
8+
font-family: "Helvetica Neue", sans-serif;
9+
margin: 0;
10+
padding: 40px;
11+
background-color: #f5f7fa;
12+
}
13+
14+
h1 {
15+
text-align: center;
16+
color: #333;
17+
margin-bottom: 30px;
18+
}
19+
20+
#searchInput {
21+
display: block;
22+
margin: 0 auto 30px auto;
23+
padding: 10px 15px;
24+
width: 60%;
25+
font-size: 16px;
26+
border: 1px solid #ccc;
27+
border-radius: 6px;
28+
}
29+
30+
.grid {
31+
display: grid;
32+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
33+
gap: 20px;
34+
}
35+
36+
.card {
37+
background: white;
38+
border-radius: 12px;
39+
padding: 20px;
40+
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
41+
transition: transform 0.2s;
42+
}
43+
44+
.card:hover {
45+
transform: translateY(-4px);
46+
box-shadow: 0 5px 15px rgba(0,0,0,0.12);
47+
}
48+
49+
.card-title {
50+
font-size: 18px;
51+
font-weight: bold;
52+
margin-bottom: 10px;
53+
color: #2c3e50;
54+
}
55+
56+
.card-desc {
57+
font-size: 14px;
58+
color: #555;
59+
margin-bottom: 15px;
60+
}
61+
62+
.card a {
63+
text-decoration: none;
64+
color: #3498db;
65+
font-weight: bold;
66+
}
67+
68+
.hidden {
69+
display: none;
70+
}
71+
72+
footer {
73+
text-align: center;
74+
margin-top: 40px;
75+
font-size: 13px;
76+
color: #aaa;
77+
}
78+
</style>
79+
</head>
80+
<body>
81+
<h1>算法可视化 · 资源导航</h1>
82+
<input id="searchInput" type="text" placeholder="🔍 输入关键字搜索，如 binary、查找、排序...">
83+
84+
<div class="grid" id="cardGrid">
85+
<!-- 示例卡片：binary-search-basic -->
86+
<div class="card" data-tags="binary search 二分查找 可视化">
87+
<div class="card-title">Binary Search 可视化</div>
88+
<div class="card-desc">通过动画步骤演示二分查找过程，支持自定义输入和间隔时间。</div>
89+
<a href="./binary-search-basic.html" target="_blank">打开页面</a>
90+
</div>
91+
92+
<!-- 可继续添加更多算法可视化页面 -->
93+
<!--
94+
<div class="card" data-tags="bubble sort 排序 可视化">
95+
<div class="card-title">Bubble Sort 可视化</div>
96+
<div class="card-desc">冒泡排序过程演示，适合新手理解排序原理。</div>
97+
<a href="./bubble-sort.html" target="_blank">打开页面</a>
98+
</div>
99+
-->
100+
</div>
101+
102+
<footer>
103+
© 2025 算法可视化项目 | 由你亲手打造 💡
104+
</footer>
105+
106+
<script>
107+
const searchInput = document.getElementById("searchInput");
108+
const cards = document.querySelectorAll(".card");
109+
110+
searchInput.addEventListener("input", function () {
111+
const query = this.value.toLowerCase();
112+
cards.forEach(card => {
113+
const tags = card.getAttribute("data-tags").toLowerCase();
114+
card.classList.toggle("hidden", !tags.includes(query));
115+
});
116+
});
117+
</script>
118+
</body>
119+
</html>

0 commit comments

Comments
 (0)