Skip to content

Commit f9281a6

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

File tree

2 files changed

+211
-2
lines changed

2 files changed

+211
-2
lines changed

‎T153-binary-search-find-minimum-in-rotated-sorted-array.html‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>T153 Find Minimum in Rotated Sorted Array</title>
7+
<style>
8+
body {
9+
font-family: sans-serif;
10+
background-color: #f0f2f5;
11+
padding: 20px;
12+
}
13+
.array-container {
14+
display: flex;
15+
justify-content: center;
16+
margin-top: 20px;
17+
position: relative;
18+
}
19+
.box {
20+
width: 50px;
21+
height: 50px;
22+
border: 2px solid #333;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
margin: 0 4px;
27+
background-color: white;
28+
font-weight: bold;
29+
transition: background-color 0.5s;
30+
position: relative;
31+
}
32+
.highlight-left {
33+
background-color: #ffd700;
34+
}
35+
.highlight-mid {
36+
background-color: #1e90ff;
37+
color: white;
38+
}
39+
.highlight-right {
40+
background-color: #32cd32;
41+
color: white;
42+
}
43+
.highlight-result {
44+
background-color: #ff1493 !important;
45+
color: white;
46+
}
47+
.pointer-labels {
48+
position: absolute;
49+
top: -25px;
50+
left: 0;
51+
width: 100%;
52+
display: flex;
53+
justify-content: center;
54+
}
55+
.pointer {
56+
font-size: 14px;
57+
color: black;
58+
position: absolute;
59+
}
60+
.log {
61+
background-color: #111;
62+
color: #0f0;
63+
padding: 10px;
64+
margin-top: 20px;
65+
height: 200px;
66+
overflow-y: auto;
67+
font-family: monospace;
68+
white-space: pre-wrap;
69+
}
70+
input[type="text"] {
71+
width: 300px;
72+
padding: 5px;
73+
font-size: 16px;
74+
}
75+
button {
76+
padding: 6px 16px;
77+
margin-left: 8px;
78+
font-size: 16px;
79+
cursor: pointer;
80+
}
81+
.nav {
82+
margin-top: 20px;
83+
}
84+
.nav a {
85+
color: #007bff;
86+
text-decoration: none;
87+
}
88+
.nav a:hover {
89+
text-decoration: underline;
90+
}
91+
</style>
92+
</head>
93+
<body>
94+
<h2>T153 可视化：寻找旋转排序数组中的最小值</h2>
95+
<div>
96+
输入数组（逗号分隔）：<input type="text" id="inputArray" value="4,5,6,7,0,1,2">
97+
<button onclick="visualize()">开始可视化</button>
98+
</div>
99+
<div class="array-container" id="arrayContainer"></div>
100+
<div class="log" id="log"></div>
101+
<div class="nav">
102+
<a href="index.html">← 返回首页</a>
103+
</div>
104+
105+
<script>
106+
function sleep(ms) {
107+
return new Promise(resolve => setTimeout(resolve, ms));
108+
}
109+
110+
function log(msg) {
111+
const logBox = document.getElementById("log");
112+
logBox.textContent += msg + "\n";
113+
logBox.scrollTop = logBox.scrollHeight;
114+
}
115+
116+
function renderArray(nums, left, mid, right, highlightIndex = -1) {
117+
const container = document.getElementById("arrayContainer");
118+
container.innerHTML = "";
119+
120+
nums.forEach((num, i) => {
121+
const div = document.createElement("div");
122+
div.className = "box";
123+
div.textContent = num;
124+
125+
if (i === highlightIndex) {
126+
div.classList.add("highlight-result");
127+
} else {
128+
if (i === left) div.classList.add("highlight-left");
129+
if (i === mid) div.classList.add("highlight-mid");
130+
if (i === right) div.classList.add("highlight-right");
131+
}
132+
133+
container.appendChild(div);
134+
});
135+
136+
// Add pointer labels
137+
const pointerLayer = document.createElement("div");
138+
pointerLayer.className = "pointer-labels";
139+
140+
nums.forEach((_, i) => {
141+
const label = document.createElement("div");
142+
label.style.width = "58px";
143+
label.style.textAlign = "center";
144+
if (i === left) label.textContent = "L";
145+
else if (i === mid) label.textContent = "M";
146+
else if (i === right) label.textContent = "R";
147+
else label.textContent = "";
148+
pointerLayer.appendChild(label);
149+
});
150+
151+
container.appendChild(pointerLayer);
152+
}
153+
154+
async function visualize() {
155+
document.getElementById("log").textContent = "";
156+
let input = document.getElementById("inputArray").value;
157+
let nums = input.split(",").map(s => parseInt(s.trim())).filter(n => !isNaN(n));
158+
if (nums.length === 0) {
159+
log("请输入有效的整数数组");
160+
return;
161+
}
162+
163+
let left = 0;
164+
let right = nums.length - 1;
165+
let min = nums[0];
166+
let resultIndex = 0;
167+
168+
while (left <= right) {
169+
const mid = Math.floor(left + (right - left) / 2);
170+
renderArray(nums, left, mid, right);
171+
log(`当前范围 [${left}, ${right}]，mid=${mid}, nums[mid]=${nums[mid]}`);
172+
await sleep(1000);
173+
174+
if (nums[left] <= nums[right]) {
175+
min = Math.min(min, nums[left]);
176+
resultIndex = left;
177+
log(`数组整体有序，最小值为 nums[${left}] = ${nums[left]}`);
178+
break;
179+
}
180+
181+
if (nums[mid] < min) {
182+
min = nums[mid];
183+
resultIndex = mid;
184+
}
185+
log(`更新 min = ${min}`);
186+
187+
if (nums[left] <= nums[mid]) {
188+
log("左侧有序，最小值在右侧");
189+
left = mid + 1;
190+
} else {
191+
log("右侧有序，最小值在左侧");
192+
right = mid - 1;
193+
}
194+
195+
await sleep(1000);
196+
}
197+
198+
renderArray(nums, -1, -1, -1, resultIndex);
199+
log("\n最终最小值为：" + min);
200+
}
201+
</script>
202+
</body>
203+
</html>

‎index.html‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,9 +142,9 @@ <h1>算法可视化 · 资源导航</h1>
142142
<!-- 示例卡片 -->
143143

144144

145-
<div class="card" data-tags="T033 binary search 二分查找 范围 最大值 最小值">
145+
<div class="card" data-tags="T033 binary search 二分查找 范围 最大值 最小值 旋转数组 局部有序">
146146
<div class="card-title">T033 搜索旋转排序数组</div>
147-
<div class="card-desc">通过动画步骤演示二分查找范围过程</div>
147+
<div class="card-desc">二分查找 旋转数组 局部有序</div>
148148
<a href="./T033-binary-search-in-rotated-sorted-array.html" target="_blank">打开页面</a>
149149
</div>
150150

@@ -166,6 +166,12 @@ <h1>算法可视化 · 资源导航</h1>
166166
<a href="./T704-binary-search-basic.html" target="_blank">打开页面</a>
167167
</div>
168168

169+
<div class="card" data-tags="T153 binary search 二分查找 范围 最大值 最小值 旋转数组 局部有序">
170+
<div class="card-title">T153 寻找旋转排序数组中的最小值</div>
171+
<div class="card-desc">二分查找 旋转数组 局部有序</div>
172+
<a href="./T153-binary-search-find-minimum-in-rotated-sorted-array.html" target="_blank">打开页面</a>
173+
</div>
174+
169175
<div class="card" data-tags="T852 binary search 二分查找 三分查找">
170176
<div class="card-title">T852 山脉数组的峰顶索引</div>
171177
<div class="card-desc">通过动画步骤演示二分查找峰值</div>

0 commit comments

Comments
 (0)