Skip to content

Commit f7ec94c

Browse files
houbbhoubb
committed
[Feature] add for new
1 parent 2f26cbb commit f7ec94c

File tree

3 files changed

+481
-0
lines changed

3 files changed

+481
-0
lines changed

‎T164-radix-sort-basic.html‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
<!DOCTYPE html>
2+
<html lang="zh">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Radix Sort 可视化 - 力扣 T164 最大间距</title>
6+
<style>
7+
body {
8+
font-family: 'Segoe UI', sans-serif;
9+
padding: 20px;
10+
}
11+
.input-group {
12+
margin-bottom: 12px;
13+
}
14+
.array-box, .bucket {
15+
display: flex;
16+
margin: 10px 0;
17+
justify-content: center;
18+
flex-wrap: wrap;
19+
}
20+
.item {
21+
width: 40px;
22+
height: 40px;
23+
margin: 4px;
24+
background-color: #4caf50;
25+
color: white;
26+
display: flex;
27+
justify-content: center;
28+
align-items: center;
29+
border-radius: 6px;
30+
font-weight: bold;
31+
}
32+
.bucket-container {
33+
display: flex;
34+
justify-content: space-between;
35+
}
36+
.bucket-column {
37+
width: 60px;
38+
text-align: center;
39+
}
40+
.bucket-column .bucket {
41+
border: 1px solid #ccc;
42+
padding: 5px;
43+
min-height: 50px;
44+
background: #f9f9f9;
45+
border-radius: 4px;
46+
}
47+
#log {
48+
background-color: #000;
49+
color: #0f0;
50+
padding: 10px;
51+
height: 180px;
52+
overflow-y: auto;
53+
white-space: pre-line;
54+
font-family: monospace;
55+
}
56+
.controls {
57+
margin-top: 12px;
58+
}
59+
</style>
60+
</head>
61+
<body>
62+
<h2>🧮 基数排序可视化 - 力扣 T164 最大间距</h2>
63+
64+
<div class="input-group">
65+
<label>输入数组（逗号分隔）：</label>
66+
<input id="inputArray" type="text" value="170,45,75,90,802,24,2,66" size="50">
67+
</div>
68+
69+
<div class="input-group">
70+
<label>动画间隔（毫秒）：</label>
71+
<input id="delay" type="number" value="1000" min="100">
72+
</div>
73+
74+
<button onclick="startVisualization()">▶️ 开始可视化</button>
75+
<a href="index.html" style="margin-left:20px;">返回首页</a>
76+
77+
<h3>数组状态</h3>
78+
<div id="array" class="array-box"></div>
79+
80+
<h3>每位的桶（0~9）</h3>
81+
<div class="bucket-container" id="buckets">
82+
<!-- 10个桶 -->
83+
<!-- 每个桶是 .bucket-column 下的 .bucket -->
84+
</div>
85+
86+
<h3>日志输出</h3>
87+
<div id="log"></div>
88+
89+
<script>
90+
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
91+
92+
function log(msg) {
93+
const logEl = document.getElementById("log");
94+
logEl.textContent += msg + "\n";
95+
logEl.scrollTop = logEl.scrollHeight;
96+
}
97+
98+
function renderArray(arr) {
99+
const arrayEl = document.getElementById("array");
100+
arrayEl.innerHTML = "";
101+
arr.forEach(num => {
102+
const div = document.createElement("div");
103+
div.className = "item";
104+
div.innerText = num;
105+
arrayEl.appendChild(div);
106+
});
107+
}
108+
109+
function clearBuckets() {
110+
for (let i = 0; i < 10; i++) {
111+
document.getElementById(`bucket-${i}`).innerHTML = "";
112+
}
113+
}
114+
115+
function renderBuckets(bucketQueues) {
116+
clearBuckets();
117+
for (let i = 0; i < 10; i++) {
118+
const bucket = bucketQueues[i];
119+
const container = document.getElementById(`bucket-${i}`);
120+
bucket.forEach(num => {
121+
const div = document.createElement("div");
122+
div.className = "item";
123+
div.innerText = num;
124+
container.appendChild(div);
125+
});
126+
}
127+
}
128+
129+
async function startVisualization() {
130+
const input = document.getElementById("inputArray").value.trim();
131+
const delay = parseInt(document.getElementById("delay").value) || 1000;
132+
const arr = input.split(",").map(s => parseInt(s.trim())).filter(n => !isNaN(n));
133+
134+
if (arr.length < 2) {
135+
alert("请输入至少两个数字");
136+
return;
137+
}
138+
139+
document.getElementById("log").textContent = "";
140+
log("开始基数排序...");
141+
142+
renderArray(arr);
143+
const max = Math.max(...arr);
144+
let exp = 1;
145+
146+
while (Math.floor(max / exp) > 0) {
147+
log(`\n📍 当前位数（exp）: ${exp}`);
148+
const buckets = Array.from({ length: 10 }, () => []);
149+
150+
// 入桶
151+
for (let num of arr) {
152+
const digit = Math.floor(num / exp) % 10;
153+
buckets[digit].push(num);
154+
log(`将 ${num} 放入桶 ${digit}`);
155+
}
156+
157+
renderBuckets(buckets);
158+
await sleep(delay);
159+
160+
// 出桶
161+
let idx = 0;
162+
for (let i = 0; i < 10; i++) {
163+
while (buckets[i].length > 0) {
164+
const num = buckets[i].shift();
165+
arr[idx++] = num;
166+
log(`从桶 ${i} 取出 ${num}`);
167+
renderArray(arr);
168+
renderBuckets(buckets);
169+
await sleep(100);
170+
}
171+
}
172+
173+
exp *= 10;
174+
}
175+
176+
log(`\n✅ 排序完成: ${arr.join(', ')}`);
177+
// 计算最大间距
178+
let maxGap = 0;
179+
for (let i = 1; i < arr.length; i++) {
180+
const gap = arr[i] - arr[i - 1];
181+
log(`间距: ${arr[i]} - ${arr[i - 1]} = ${gap}`);
182+
maxGap = Math.max(maxGap, gap);
183+
}
184+
185+
log(`\n🔥 最大间距为: ${maxGap}`);
186+
}
187+
188+
// 初始化桶 UI
189+
window.onload = () => {
190+
const container = document.getElementById("buckets");
191+
for (let i = 0; i < 10; i++) {
192+
const col = document.createElement("div");
193+
col.className = "bucket-column";
194+
col.innerHTML = `<strong>${i}</strong><div class="bucket" id="bucket-${i}"></div>`;
195+
container.appendChild(col);
196+
}
197+
}
198+
</script>
199+
</body>
200+
</html>

0 commit comments

Comments
 (0)