Skip to content

Commit 803e0d1

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

File tree

2 files changed

+210
-2
lines changed

2 files changed

+210
-2
lines changed

‎T035-binary-search-insert.html

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
<!DOCTYPE html>
2+
<html lang="zh">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>🔍 搜索插入位置可视化</title>
6+
<style>
7+
body {
8+
font-family: "Helvetica Neue", sans-serif;
9+
background-color: #f2f4f8;
10+
margin: 0;
11+
padding: 20px;
12+
}
13+
14+
h1 {
15+
text-align: center;
16+
color: #333;
17+
}
18+
19+
.container {
20+
max-width: 800px;
21+
margin: auto;
22+
background: #fff;
23+
padding: 20px;
24+
border-radius: 10px;
25+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
26+
}
27+
28+
label {
29+
display: block;
30+
margin: 10px 0 5px;
31+
font-weight: bold;
32+
}
33+
34+
input[type="text"], input[type="number"] {
35+
width: 100%;
36+
padding: 10px;
37+
font-size: 16px;
38+
margin-bottom: 15px;
39+
border: 1px solid #ccc;
40+
border-radius: 5px;
41+
}
42+
43+
button {
44+
padding: 10px 20px;
45+
font-size: 16px;
46+
margin-top: 10px;
47+
border: none;
48+
background-color: #007bff;
49+
color: white;
50+
border-radius: 5px;
51+
cursor: pointer;
52+
}
53+
54+
button:hover {
55+
background-color: #0056b3;
56+
}
57+
58+
.array-box {
59+
display: flex;
60+
justify-content: center;
61+
flex-wrap: wrap;
62+
margin-top: 20px;
63+
}
64+
65+
.array-item {
66+
width: 40px;
67+
height: 40px;
68+
margin: 5px;
69+
text-align: center;
70+
line-height: 40px;
71+
border-radius: 5px;
72+
background-color: #e0e0e0;
73+
font-weight: bold;
74+
}
75+
76+
.left {
77+
background-color: #ffcc80 !important;
78+
}
79+
80+
.mid {
81+
background-color: #90caf9 !important;
82+
}
83+
84+
.right {
85+
background-color: #a5d6a7 !important;
86+
}
87+
88+
.result {
89+
margin-top: 20px;
90+
font-size: 18px;
91+
font-weight: bold;
92+
text-align: center;
93+
}
94+
95+
.nav {
96+
text-align: center;
97+
margin-top: 30px;
98+
}
99+
100+
.nav a {
101+
text-decoration: none;
102+
color: #007bff;
103+
font-size: 16px;
104+
}
105+
106+
.nav a:hover {
107+
text-decoration: underline;
108+
}
109+
110+
.step {
111+
font-family: monospace;
112+
background: #f7f7f7;
113+
padding: 10px;
114+
margin-top: 10px;
115+
border-radius: 5px;
116+
overflow-x: auto;
117+
}
118+
</style>
119+
</head>
120+
<body>
121+
<div class="container">
122+
<h1>🔍 搜索插入位置（二分查找可视化）</h1>
123+
124+
<label for="arrayInput">输入有序数组（用逗号分隔）:</label>
125+
<input type="text" id="arrayInput" value="1,3,5,6" />
126+
127+
<label for="targetInput">目标值:</label>
128+
<input type="number" id="targetInput" value="5" />
129+
130+
<button onclick="startVisualization()">开始查找</button>
131+
132+
<div class="array-box" id="arrayDisplay"></div>
133+
<div class="result" id="resultText"></div>
134+
<div class="step" id="log"></div>
135+
136+
<div class="nav">
137+
<a href="index.html">← 返回首页</a>
138+
</div>
139+
</div>
140+
141+
<script>
142+
function sleep(ms) {
143+
return new Promise(resolve => setTimeout(resolve, ms));
144+
}
145+
146+
async function startVisualization() {
147+
const input = document.getElementById("arrayInput").value;
148+
const target = parseInt(document.getElementById("targetInput").value);
149+
const arr = input.split(",").map(s => parseInt(s.trim())).filter(n => !isNaN(n));
150+
const log = document.getElementById("log");
151+
log.innerText = "";
152+
153+
if (arr.length === 0 || isNaN(target)) {
154+
alert("请正确输入数组和目标值！");
155+
return;
156+
}
157+
158+
const arrayDisplay = document.getElementById("arrayDisplay");
159+
const resultText = document.getElementById("resultText");
160+
arrayDisplay.innerHTML = "";
161+
resultText.innerText = "";
162+
163+
let left = 0, right = arr.length - 1;
164+
165+
while (left <= right) {
166+
renderArray(arr, left, right, Math.floor((left + right) / 2));
167+
const mid = Math.floor((left + right) / 2);
168+
log.innerText += `left=${left}, mid=${mid}, right=${right}, value=${arr[mid]}\n`;
169+
170+
await sleep(1000);
171+
172+
if (arr[mid] === target) {
173+
resultText.innerText = `🎯 找到目标值，索引为 ${mid}`;
174+
return;
175+
} else if (arr[mid] < target) {
176+
left = mid + 1;
177+
} else {
178+
right = mid - 1;
179+
}
180+
}
181+
182+
renderArray(arr, left, -1, -1);
183+
resultText.innerText = `➕ 未找到目标值，应插入索引为 ${left}`;
184+
}
185+
186+
function renderArray(arr, left, right, mid) {
187+
const display = document.getElementById("arrayDisplay");
188+
display.innerHTML = "";
189+
190+
arr.forEach((val, idx) => {
191+
const div = document.createElement("div");
192+
div.className = "array-item";
193+
if (idx === mid) div.classList.add("mid");
194+
if (idx === left) div.classList.add("left");
195+
if (idx === right) div.classList.add("right");
196+
div.innerText = val;
197+
display.appendChild(div);
198+
});
199+
}
200+
</script>
201+
</body>
202+
</html>

‎index.html

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -141,9 +141,15 @@ <h1>算法可视化 · 资源导航</h1>
141141
<div class="grid" id="cardGrid">
142142
<!-- 示例卡片 -->
143143
<div class="card" data-tags="binary search 二分查找 可视化">
144-
<div class="card-title">Binary Search 可视化</div>
144+
<div class="card-title">T704 Binary Search 可视化</div>
145145
<div class="card-desc">通过动画步骤演示二分查找过程，支持自定义输入和间隔时间。</div>
146-
<a href="./binary-search-basic.html" target="_blank">打开页面</a>
146+
<a href="./T704-binary-search-basic.html" target="_blank">打开页面</a>
147+
</div>
148+
149+
<div class="card" data-tags="binary search 二分查找 可视化 插入">
150+
<div class="card-title">T035 Binary Search Insert 可视化</div>
151+
<div class="card-desc">通过动画步骤演示二分查找插入过程，支持自定义输入和间隔时间。</div>
152+
<a href="./T035-binary-search-insert.html" target="_blank">打开页面</a>
147153
</div>
148154
</div>
149155

0 commit comments

Comments
 (0)