Skip to content

Commit c389660

Browse files
houbbhoubb
committed
[Feature] add for new
1 parent 44ece9f commit c389660

File tree

2 files changed

+191
-3
lines changed

2 files changed

+191
-3
lines changed

‎T875-binary-search-eat-banana.html

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>🍌 T875 可视化：爱吃香蕉的珂珂</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: 900px;
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+
.range-box {
27+
display: flex;
28+
justify-content: center;
29+
align-items: center;
30+
margin-top: 20px;
31+
font-size: 18px;
32+
}
33+
.range-item {
34+
padding: 10px 15px;
35+
margin: 5px;
36+
border: 2px solid #ccc;
37+
border-radius: 6px;
38+
background-color: white;
39+
transition: background-color 0.3s;
40+
min-width: 60px;
41+
text-align: center;
42+
}
43+
.mid {
44+
background-color: #ffeb3b;
45+
font-weight: bold;
46+
}
47+
.valid {
48+
background-color: #8bc34a;
49+
color: white;
50+
}
51+
.invalid {
52+
background-color: #e57373;
53+
color: white;
54+
}
55+
.card {
56+
background: white;
57+
border-radius: 8px;
58+
padding: 20px;
59+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
60+
margin-top: 20px;
61+
}
62+
.footer {
63+
margin-top: 30px;
64+
text-align: center;
65+
}
66+
.back {
67+
margin-top: 20px;
68+
display: inline-block;
69+
padding: 8px 12px;
70+
background: #2196f3;
71+
color: white;
72+
text-decoration: none;
73+
border-radius: 5px;
74+
}
75+
.log {
76+
background: #1e1e1e;
77+
color: #dcdcdc;
78+
font-family: monospace;
79+
padding: 10px;
80+
height: 200px;
81+
overflow-y: auto;
82+
margin-top: 10px;
83+
border-radius: 5px;
84+
}
85+
.log p {
86+
margin: 4px 0;
87+
}
88+
</style>
89+
</head>
90+
<body>
91+
<div class="container">
92+
<h1>🍌 T875 可视化：爱吃香蕉的珂珂</h1>
93+
94+
<label>香蕉堆数组（用逗号分隔）：</label><br>
95+
<input type="text" id="pilesInput" value="3,6,7,11" size="50"/><br>
96+
<label>小时数 h：</label><br>
97+
<input type="number" id="hoursInput" value="8"/><br>
98+
<button onclick="visualize()">开始可视化</button>
99+
100+
<div class="range-box" id="rangeBox"></div>
101+
<div class="log" id="logBox"></div>
102+
103+
<div class="card" id="resultCard" style="display:none;">
104+
<h3>最小吃香蕉速度</h3>
105+
<p id="resultText"></p>
106+
</div>
107+
108+
<div class="footer">
109+
<a href="index.html" class="back">⬅ 返回首页</a>
110+
</div>
111+
</div>
112+
113+
<script>
114+
function sleep(ms) {
115+
return new Promise(resolve => setTimeout(resolve, ms));
116+
}
117+
118+
function log(msg) {
119+
const logBox = document.getElementById("logBox");
120+
const p = document.createElement("p");
121+
p.textContent = msg;
122+
logBox.appendChild(p);
123+
logBox.scrollTop = logBox.scrollHeight;
124+
}
125+
126+
async function visualize() {
127+
const input = document.getElementById("pilesInput").value;
128+
const h = parseInt(document.getElementById("hoursInput").value);
129+
const piles = input.split(",").map(n => parseInt(n.trim()));
130+
const rangeBox = document.getElementById("rangeBox");
131+
const resultCard = document.getElementById("resultCard");
132+
const resultText = document.getElementById("resultText");
133+
const logBox = document.getElementById("logBox");
134+
135+
rangeBox.innerHTML = "";
136+
logBox.innerHTML = "";
137+
resultCard.style.display = "none";
138+
139+
let left = 1, right = Math.max(...piles), ans = right;
140+
log(`开始二分查找，初始速度范围：[${left}, ${right}]`);
141+
142+
while (left <= right) {
143+
const mid = Math.floor((left + right) / 2);
144+
145+
// 可视化 range
146+
rangeBox.innerHTML = "";
147+
for (let i = left; i <= right; i++) {
148+
const div = document.createElement("div");
149+
div.className = "range-item";
150+
div.innerText = i;
151+
if (i === mid) div.classList.add("mid");
152+
rangeBox.appendChild(div);
153+
}
154+
155+
log(`🚀 尝试速度：${mid} 根/小时`);
156+
157+
let totalHours = 0;
158+
for (let pile of piles) {
159+
totalHours += Math.ceil(pile / mid);
160+
}
161+
162+
log(`⏱️ 总共耗时：${totalHours} 小时`);
163+
164+
if (totalHours <= h) {
165+
log(`✅ 可行！记录当前速度 ${mid}，尝试更小速度...`);
166+
ans = mid;
167+
right = mid - 1;
168+
rangeBox.querySelectorAll(".range-item")[mid - left].classList.add("valid");
169+
} else {
170+
log(`❌ 不可行，尝试更大速度...`);
171+
left = mid + 1;
172+
rangeBox.querySelectorAll(".range-item")[mid - left + (left > mid ? 1 : 0)].classList.add("invalid");
173+
}
174+
175+
await sleep(1000);
176+
}
177+
178+
log(`🎯 最小可行速度为：${ans}`);
179+
resultCard.style.display = "block";
180+
resultText.innerText = `${ans} 根/小时`;
181+
}
182+
</script>
183+
</body>
184+
</html>

‎index.html

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -153,18 +153,22 @@ <h1>算法可视化 · 资源导航</h1>
153153
</div>
154154

155155
<div class="card" data-tags="T704 binary search 二分查找">
156-
<div class="card-title">T704 二分查找基本</div>
156+
<div class="card-title">T704 二分查找目标值是否存在</div>
157157
<div class="card-desc">通过动画步骤演示二分查找过程</div>
158158
<a href="./T704-binary-search-basic.html" target="_blank">打开页面</a>
159159
</div>
160160

161161
<div class="card" data-tags="T852 binary search 二分查找 三分查找">
162-
<div class="card-title">T852 二分查找峰值、三分查找</div>
162+
<div class="card-title">T852 山脉数组的峰顶索引</div>
163163
<div class="card-desc">通过动画步骤演示二分查找峰值</div>
164164
<a href="./T852-binary-search-peek.html" target="_blank">打开页面</a>
165165
</div>
166166

167-
167+
<div class="card" data-tags="T875 binary search 二分查找 最大值 最小值">
168+
<div class="card-title">T875 爱吃香蕉的珂珂 </div>
169+
<div class="card-desc">通过动画步骤演示二分法在某个值的范围内，寻找最小/最大满足条件的值的场景</div>
170+
<a href="./T875-binary-search-eat-banana.html" target="_blank">打开页面</a>
171+
</div>
168172

169173
</div>
170174

0 commit comments

Comments
 (0)