Skip to content

Commit 96fd18e

Browse files
houbbhoubb
committed
[Feature] add for new
1 parent 803e0d1 commit 96fd18e

File tree

2 files changed

+213
-7
lines changed

2 files changed

+213
-7
lines changed

‎T034-binary-search-range.html‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>🔍 T34 可视化：查找元素的第一个和最后一个位置</title>
6+
<style>
7+
body {
8+
font-family: 'Segoe UI', sans-serif;
9+
background: #f4f6f8;
10+
margin: 0;
11+
padding: 20px;
12+
}
13+
.container {
14+
max-width: 800px;
15+
margin: auto;
16+
}
17+
h1 {
18+
text-align: center;
19+
color: #333;
20+
}
21+
input, button {
22+
padding: 10px;
23+
margin: 5px 0;
24+
font-size: 16px;
25+
}
26+
.array-box {
27+
display: flex;
28+
justify-content: center;
29+
flex-wrap: wrap;
30+
margin: 20px 0;
31+
}
32+
.item {
33+
width: 40px;
34+
height: 40px;
35+
border: 2px solid #ccc;
36+
display: flex;
37+
align-items: center;
38+
justify-content: center;
39+
margin: 4px;
40+
background-color: white;
41+
transition: background-color 0.3s;
42+
}
43+
.highlight {
44+
background-color: #ffeb3b;
45+
}
46+
.found {
47+
background-color: #8bc34a !important;
48+
}
49+
.not-found {
50+
background-color: #e57373 !important;
51+
}
52+
.card {
53+
background: white;
54+
border-radius: 8px;
55+
padding: 20px;
56+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
57+
margin-top: 20px;
58+
}
59+
.footer {
60+
margin-top: 30px;
61+
text-align: center;
62+
}
63+
.back {
64+
margin-top: 20px;
65+
display: inline-block;
66+
padding: 8px 12px;
67+
background: #2196f3;
68+
color: white;
69+
text-decoration: none;
70+
border-radius: 5px;
71+
}
72+
.log {
73+
background: #1e1e1e;
74+
color: #dcdcdc;
75+
font-family: monospace;
76+
padding: 10px;
77+
height: 200px;
78+
overflow-y: auto;
79+
margin-top: 10px;
80+
border-radius: 5px;
81+
}
82+
.log p {
83+
margin: 4px 0;
84+
}
85+
</style>
86+
</head>
87+
<body>
88+
<div class="container">
89+
<h1>🔍 T34 可视化：查找元素的第一个和最后一个位置</h1>
90+
91+
<label>数组（用逗号分隔）：</label><br>
92+
<input type="text" id="arrayInput" value="5,7,7,8,8,10" size="50"/><br>
93+
<label>目标值：</label><br>
94+
<input type="number" id="targetInput" value="8"/><br>
95+
<button onclick="visualize()">开始可视化</button>
96+
97+
<div class="array-box" id="arrayBox"></div>
98+
99+
<div class="log" id="logBox"></div>
100+
101+
<div class="card" id="resultCard" style="display:none;">
102+
<h3>查找结果</h3>
103+
<p id="resultText"></p>
104+
</div>
105+
106+
<div class="footer">
107+
<a href="index.html" class="back">⬅ 返回首页</a>
108+
</div>
109+
</div>
110+
111+
<script>
112+
function sleep(ms) {
113+
return new Promise(resolve => setTimeout(resolve, ms));
114+
}
115+
116+
function log(msg) {
117+
const logBox = document.getElementById("logBox");
118+
const p = document.createElement("p");
119+
p.textContent = msg;
120+
logBox.appendChild(p);
121+
logBox.scrollTop = logBox.scrollHeight;
122+
}
123+
124+
async function visualize() {
125+
const input = document.getElementById("arrayInput").value;
126+
const target = parseInt(document.getElementById("targetInput").value);
127+
const array = input.split(",").map(n => parseInt(n.trim()));
128+
const box = document.getElementById("arrayBox");
129+
const resultCard = document.getElementById("resultCard");
130+
const resultText = document.getElementById("resultText");
131+
const logBox = document.getElementById("logBox");
132+
133+
resultCard.style.display = "none";
134+
box.innerHTML = "";
135+
logBox.innerHTML = "";
136+
137+
array.forEach(num => {
138+
const div = document.createElement("div");
139+
div.className = "item";
140+
div.innerText = num;
141+
box.appendChild(div);
142+
});
143+
144+
const items = document.querySelectorAll(".item");
145+
146+
async function binarySearchBoundary(leftToRight) {
147+
let left = 0;
148+
let right = array.length - 1;
149+
let result = -1;
150+
log(`🔍 开始 ${leftToRight ? "查找左边界" : "查找右边界"}...`);
151+
152+
while (left <= right) {
153+
let mid = Math.floor((left + right) / 2);
154+
log(`➡️ left=${left}, right=${right}, mid=${mid}, nums[mid]=${array[mid]}`);
155+
156+
items[mid].classList.add("highlight");
157+
await sleep(700);
158+
items[mid].classList.remove("highlight");
159+
160+
if (array[mid] === target) {
161+
result = mid;
162+
log(`✅ nums[mid] == target，记录位置为 ${mid}`);
163+
if (leftToRight) {
164+
right = mid - 1;
165+
log(`🔁 向左查找更小位置：right = ${right}`);
166+
} else {
167+
left = mid + 1;
168+
log(`🔁 向右查找更大位置：left = ${left}`);
169+
}
170+
} else if (array[mid] < target) {
171+
left = mid + 1;
172+
log(`⬆️ nums[mid] < target，向右查找：left = ${left}`);
173+
} else {
174+
right = mid - 1;
175+
log(`⬇️ nums[mid] > target，向左查找：right = ${right}`);
176+
}
177+
}
178+
179+
log(`🎯 ${leftToRight ? "左边界" : "右边界"} 查找结束，结果：${result}`);
180+
return result;
181+
}
182+
183+
const first = await binarySearchBoundary(true);
184+
const last = await binarySearchBoundary(false);
185+
186+
if (first !== -1) {
187+
items[first].classList.add("found");
188+
if (last !== first) items[last].classList.add("found");
189+
} else {
190+
array.forEach((_, i) => items[i].classList.add("not-found"));
191+
}
192+
193+
resultCard.style.display = "block";
194+
resultText.innerText = `结果区间：[${first}, ${last}]`;
195+
}
196+
</script>
197+
</body>
198+
</html>

‎index.html‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -140,17 +140,25 @@ <h1>算法可视化 · 资源导航</h1>
140140

141141
<div class="grid" id="cardGrid">
142142
<!-- 示例卡片 -->
143-
<div class="card" data-tags="binary search 二分查找 可视化">
144-
<div class="card-title">T704 Binary Search 可视化</div>
145-
<div class="card-desc">通过动画步骤演示二分查找过程，支持自定义输入和间隔时间。</div>
146-
<a href="./T704-binary-search-basic.html" target="_blank">打开页面</a>
143+
<div class="card" data-tags="T034 binary search 二分查找 范围 最大值 最小值">
144+
<div class="card-title">T034 查找元素的第一个和最后一个位置</div>
145+
<div class="card-desc">通过动画步骤演示二分查找范围过程</div>
146+
<a href="./T034-binary-search-range.html" target="_blank">打开页面</a>
147147
</div>
148148

149-
<div class="card" data-tags="binary search 二分查找 可视化 插入">
150-
<div class="card-title">T035 Binary Search Insert 可视化</div>
151-
<div class="card-desc">通过动画步骤演示二分查找插入过程，支持自定义输入和间隔时间。</div>
149+
<div class="card" data-tags="T035 binary search 二分查找 插入">
150+
<div class="card-title">T035 搜索插入位置</div>
151+
<div class="card-desc">通过动画步骤演示二分查找插入过程</div>
152152
<a href="./T035-binary-search-insert.html" target="_blank">打开页面</a>
153153
</div>
154+
155+
<div class="card" data-tags="T704 binary search 二分查找">
156+
<div class="card-title">T704 二分查找基本</div>
157+
<div class="card-desc">通过动画步骤演示二分查找过程</div>
158+
<a href="./T704-binary-search-basic.html" target="_blank">打开页面</a>
159+
</div>
160+
161+
154162
</div>
155163

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

0 commit comments

Comments
 (0)