Skip to content

Commit 2004da9

Browse files
houbbhoubb
committed
[Feature] add for new
1 parent f84b83a commit 2004da9

File tree

2 files changed

+222
-0
lines changed

2 files changed

+222
-0
lines changed

‎T033-binary-search-in-rotated-sorted-array.html

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>LeetCode 033 动画演示</title>
6+
<style>
7+
body {
8+
font-family: sans-serif;
9+
background: #f8f9fa;
10+
padding: 2rem;
11+
}
12+
h1 {
13+
text-align: center;
14+
margin-bottom: 1rem;
15+
}
16+
.input-section {
17+
text-align: center;
18+
margin-bottom: 1rem;
19+
}
20+
input {
21+
padding: 0.5rem;
22+
margin: 0.25rem;
23+
width: 250px;
24+
}
25+
button {
26+
padding: 0.5rem 1rem;
27+
margin-top: 0.5rem;
28+
background-color: #007bff;
29+
color: white;
30+
border: none;
31+
border-radius: 5px;
32+
cursor: pointer;
33+
}
34+
.array-container {
35+
display: flex;
36+
justify-content: center;
37+
flex-wrap: wrap;
38+
margin: 2rem auto;
39+
}
40+
.box {
41+
width: 50px;
42+
height: 50px;
43+
line-height: 50px;
44+
margin: 5px;
45+
text-align: center;
46+
font-weight: bold;
47+
background-color: #e0e0e0;
48+
border-radius: 6px;
49+
position: relative;
50+
transition: 0.3s ease;
51+
}
52+
.box.left {
53+
background-color: #ffeaa7;
54+
}
55+
.box.mid {
56+
background-color: #fab1a0;
57+
}
58+
.box.right {
59+
background-color: #74b9ff;
60+
}
61+
.box.found {
62+
background-color: #55efc4;
63+
}
64+
.label {
65+
position: absolute;
66+
top: -20px;
67+
font-size: 12px;
68+
color: #555;
69+
}
70+
.log {
71+
max-width: 800px;
72+
margin: 2rem auto;
73+
font-size: 14px;
74+
background: #111;
75+
color: #00ff88;
76+
padding: 1rem;
77+
border-radius: 8px;
78+
border: 1px solid #333;
79+
max-height: 240px;
80+
overflow-y: auto;
81+
font-family: monospace;
82+
}
83+
.back-link {
84+
text-align: center;
85+
margin-top: 2rem;
86+
}
87+
.back-link a {
88+
color: #007bff;
89+
text-decoration: none;
90+
font-size: 16px;
91+
}
92+
.back-link a:hover {
93+
text-decoration: underline;
94+
}
95+
</style>
96+
</head>
97+
<body>
98+
99+
<h1>🔍 LeetCode 033 动画演示</h1>
100+
101+
<div class="input-section">
102+
<input type="text" id="numsInput" value="4,5,6,7,0,1,2" placeholder="输入数组，如 4,5,6,7,0,1,2" />
103+
<input type="number" id="targetInput" value="0" placeholder="目标值" />
104+
<br />
105+
<button onclick="startVisualization()">开始动画演示</button>
106+
</div>
107+
108+
<div class="array-container" id="arrayContainer"></div>
109+
<div class="log" id="log"></div>
110+
111+
<div class="back-link">
112+
<a href="index.html">⬅️ 返回首页</a>
113+
</div>
114+
115+
<script>
116+
function sleep(ms) {
117+
return new Promise(resolve => setTimeout(resolve, ms));
118+
}
119+
120+
function renderArray(nums, left, mid, right, targetIndex = -1) {
121+
const container = document.getElementById('arrayContainer');
122+
container.innerHTML = '';
123+
nums.forEach((num, idx) => {
124+
const div = document.createElement('div');
125+
div.className = 'box';
126+
div.textContent = num;
127+
128+
if (idx === targetIndex) div.classList.add('found');
129+
else if (idx === left) {
130+
div.classList.add('left');
131+
div.innerHTML += `<div class="label">L</div>`;
132+
}
133+
else if (idx === mid) {
134+
div.classList.add('mid');
135+
div.innerHTML += `<div class="label">M</div>`;
136+
}
137+
else if (idx === right) {
138+
div.classList.add('right');
139+
div.innerHTML += `<div class="label">R</div>`;
140+
}
141+
142+
container.appendChild(div);
143+
});
144+
}
145+
146+
async function findPivotVisual(nums, logEl) {
147+
let left = 0, right = nums.length - 1;
148+
149+
if (nums[left] < nums[right]) {
150+
logEl.innerHTML += `数组未旋转，返回 0<br>`;
151+
renderArray(nums, left, left, right);
152+
await sleep(800);
153+
return 0;
154+
}
155+
156+
while (left <= right) {
157+
let mid = Math.floor((left + right) / 2);
158+
renderArray(nums, left, mid, right);
159+
logEl.innerHTML += `查找旋转点: L=${left}, M=${mid}, R=${right}<br>`;
160+
await sleep(800);
161+
162+
if (mid < nums.length - 1 && nums[mid] > nums[mid + 1]) {
163+
logEl.innerHTML += `找到旋转点 at index ${mid}<br>`;
164+
return mid;
165+
}
166+
if (nums[mid] >= nums[left]) {
167+
left = mid + 1;
168+
} else {
169+
right = mid - 1;
170+
}
171+
}
172+
return -1;
173+
}
174+
175+
async function binarySearchVisual(nums, target, left, right, logEl) {
176+
while (left <= right) {
177+
const mid = Math.floor((left + right) / 2);
178+
renderArray(nums, left, mid, right);
179+
logEl.innerHTML += `二分查找: L=${left}, M=${mid}, R=${right}<br>`;
180+
await sleep(800);
181+
if (nums[mid] === target) {
182+
renderArray(nums, -1, -1, -1, mid);
183+
logEl.innerHTML += `✅ 找到目标值 ${target} at index ${mid}<br>`;
184+
return mid;
185+
} else if (nums[mid] < target) {
186+
left = mid + 1;
187+
} else {
188+
right = mid - 1;
189+
}
190+
}
191+
logEl.innerHTML += `❌ 未找到目标值 ${target}<br>`;
192+
return -1;
193+
}
194+
195+
async function startVisualization() {
196+
const nums = document.getElementById('numsInput').value.split(',').map(Number);
197+
const target = parseInt(document.getElementById('targetInput').value);
198+
const log = document.getElementById('log');
199+
log.innerHTML = '';
200+
201+
const pivot = await findPivotVisual(nums, log);
202+
203+
let result = -1;
204+
if (pivot === -1 || nums[0] <= target) {
205+
result = await binarySearchVisual(nums, target, 0, pivot === -1 ? nums.length - 1 : pivot, log);
206+
} else {
207+
result = await binarySearchVisual(nums, target, pivot + 1, nums.length - 1, log);
208+
}
209+
}
210+
</script>
211+
212+
</body>
213+
</html>

‎index.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,14 @@ <h1>算法可视化 · 资源导航</h1>
140140

141141
<div class="grid" id="cardGrid">
142142
<!-- 示例卡片 -->
143+
144+
145+
<div class="card" data-tags="T033 binary search 二分查找 范围 最大值 最小值">
146+
<div class="card-title">T033 搜索旋转排序数组</div>
147+
<div class="card-desc">通过动画步骤演示二分查找范围过程</div>
148+
<a href="./T033-binary-search-in-rotated-sorted-array.html" target="_blank">打开页面</a>
149+
</div>
150+
143151
<div class="card" data-tags="T034 binary search 二分查找 范围 最大值 最小值">
144152
<div class="card-title">T034 查找元素的第一个和最后一个位置</div>
145153
<div class="card-desc">通过动画步骤演示二分查找范围过程</div>
@@ -177,6 +185,7 @@ <h1>算法可视化 · 资源导航</h1>
177185
</div>
178186

179187

188+
180189
</div>
181190

182191
<!-- 资料部分 -->

0 commit comments

Comments
 (0)