Skip to content

Commit 370635e

Browse files
houbbhoubb
committed
[Feature] add for new
1 parent 2db8686 commit 370635e

File tree

3 files changed

+412
-0
lines changed

3 files changed

+412
-0
lines changed

‎array-difference-array-visual.html

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>差分数组可视化</title>
6+
<style>
7+
body {
8+
background: linear-gradient(135deg, #1f1f1f, #2c3e50);
9+
font-family: 'Segoe UI', sans-serif;
10+
color: #fff;
11+
text-align: center;
12+
padding: 20px;
13+
}
14+
15+
.array-container {
16+
display: flex;
17+
justify-content: center;
18+
margin: 20px 0;
19+
flex-wrap: wrap;
20+
}
21+
22+
.box {
23+
width: 50px;
24+
height: 50px;
25+
margin: 5px;
26+
line-height: 50px;
27+
font-size: 18px;
28+
font-weight: bold;
29+
background: rgba(255, 255, 255, 0.1);
30+
border-radius: 10px;
31+
backdrop-filter: blur(5px);
32+
transition: all 0.3s ease;
33+
position: relative;
34+
}
35+
36+
.box:hover {
37+
transform: scale(1.1);
38+
box-shadow: 0 0 10px #00f7ff;
39+
}
40+
41+
.highlight {
42+
background: #00f7ff;
43+
color: #000;
44+
}
45+
46+
.completed {
47+
background: #2ecc71;
48+
color: #000;
49+
}
50+
51+
.index {
52+
font-size: 10px;
53+
position: absolute;
54+
top: -18px;
55+
left: 50%;
56+
transform: translateX(-50%);
57+
color: #ccc;
58+
}
59+
60+
.controls {
61+
margin: 20px 0;
62+
}
63+
64+
input[type="text"], input[type="number"] {
65+
padding: 5px;
66+
font-size: 16px;
67+
border-radius: 6px;
68+
border: none;
69+
width: 300px;
70+
}
71+
72+
button {
73+
padding: 10px 20px;
74+
font-size: 16px;
75+
margin-left: 10px;
76+
background: #00f7ff;
77+
color: #000;
78+
border: none;
79+
border-radius: 8px;
80+
cursor: pointer;
81+
}
82+
83+
#logs {
84+
margin-top: 20px;
85+
text-align: left;
86+
max-height: 300px;
87+
overflow-y: auto;
88+
background: #111;
89+
padding: 10px;
90+
border-radius: 10px;
91+
font-family: monospace;
92+
}
93+
94+
a {
95+
display: inline-block;
96+
margin-top: 20px;
97+
color: #00f7ff;
98+
text-decoration: none;
99+
font-size: 16px;
100+
}
101+
102+
a:hover {
103+
text-decoration: underline;
104+
}
105+
</style>
106+
</head>
107+
<body>
108+
109+
<h1>差分数组可视化</h1>
110+
111+
<div class="controls">
112+
原始数组（以逗号分隔）：
113+
<input type="text" id="inputArray" value="3,8,12,14,20,25,30,35,38,40">
114+
动画间隔（秒）：
115+
<input type="number" id="interval" value="1" min="0.1" max="60" step="0.1">
116+
<button onclick="startVisualization()">开始可视化</button>
117+
</div>
118+
119+
<div>
120+
<h3>原始数组</h3>
121+
<div id="original" class="array-container"></div>
122+
</div>
123+
124+
<div>
125+
<h3>差分数组</h3>
126+
<div id="diff" class="array-container"></div>
127+
</div>
128+
129+
<div id="logs"></div>
130+
131+
<a href="index.html">返回首页</a>
132+
133+
<script>
134+
function sleep(ms) {
135+
return new Promise(resolve => setTimeout(resolve, ms));
136+
}
137+
138+
function renderArray(container, arr, prefix) {
139+
container.innerHTML = '';
140+
for (let i = 0; i < arr.length; i++) {
141+
const div = document.createElement('div');
142+
div.className = 'box';
143+
div.id = `${prefix}-${i}`;
144+
div.innerHTML = arr[i] !== null ? arr[i] : '';
145+
const idx = document.createElement('div');
146+
idx.className = 'index';
147+
idx.innerText = i;
148+
div.appendChild(idx);
149+
container.appendChild(div);
150+
}
151+
}
152+
153+
async function startVisualization() {
154+
const input = document.getElementById('inputArray').value;
155+
const intervalSec = Math.min(60, Math.max(0.1, parseFloat(document.getElementById('interval').value || 1)));
156+
const logs = document.getElementById('logs');
157+
logs.innerHTML = '';
158+
159+
let arr = input.split(',').map(x => parseInt(x.trim())).filter(x => !isNaN(x));
160+
if (arr.length < 2) {
161+
logs.innerHTML = '请输入至少两个数字。';
162+
return;
163+
}
164+
165+
let diff = Array(arr.length).fill(null);
166+
diff[0] = arr[0];
167+
168+
const originalContainer = document.getElementById('original');
169+
const diffContainer = document.getElementById('diff');
170+
renderArray(originalContainer, arr, 'original');
171+
renderArray(diffContainer, diff, 'diff');
172+
173+
// 第0位特殊处理
174+
document.getElementById('diff-0').classList.add('completed');
175+
logs.innerHTML += `diff[0] = original[0] = ${arr[0]}<br>`;
176+
177+
for (let i = 1; i < arr.length; i++) {
178+
document.getElementById(`original-${i}`).classList.add('highlight');
179+
document.getElementById(`original-${i - 1}`).classList.add('highlight');
180+
181+
await sleep(intervalSec * 1000);
182+
183+
const d = arr[i] - arr[i - 1];
184+
diff[i] = d;
185+
document.getElementById(`diff-${i}`).innerText = d;
186+
document.getElementById(`diff-${i}`).classList.add('completed');
187+
188+
logs.innerHTML += `diff[${i}] = original[${i}] - original[${i - 1}] = ${arr[i]} - ${arr[i - 1]} = ${d}<br>`;
189+
logs.scrollTop = logs.scrollHeight;
190+
191+
document.getElementById(`original-${i}`).classList.remove('highlight');
192+
document.getElementById(`original-${i - 1}`).classList.remove('highlight');
193+
}
194+
}
195+
</script>
196+
</body>
197+
</html>

0 commit comments

Comments
 (0)