Skip to content

Commit f84b83a

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

File tree

2 files changed

+171
-0
lines changed

2 files changed

+171
-0
lines changed

‎T1011-binary-search-capacity-to-ship-packages-within-d-days.html

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>LeetCode 1011 Visualization</title>
6+
<style>
7+
body {
8+
font-family: Arial, sans-serif;
9+
background-color: #f9f9f9;
10+
padding: 2rem;
11+
}
12+
h1 {
13+
text-align: center;
14+
color: #333;
15+
}
16+
.form {
17+
margin-bottom: 1rem;
18+
text-align: center;
19+
}
20+
input[type="text"], input[type="number"] {
21+
padding: 0.5rem;
22+
width: 300px;
23+
margin-right: 0.5rem;
24+
}
25+
button {
26+
padding: 0.5rem 1rem;
27+
background-color: #007bff;
28+
color: white;
29+
border: none;
30+
border-radius: 4px;
31+
cursor: pointer;
32+
}
33+
.log {
34+
max-height: 300px;
35+
overflow-y: auto;
36+
background: #fff;
37+
padding: 1rem;
38+
border: 1px solid #ddd;
39+
margin-bottom: 1rem;
40+
}
41+
.day {
42+
display: flex;
43+
margin-bottom: 0.5rem;
44+
}
45+
.box {
46+
padding: 0.5rem;
47+
background-color: #4caf50;
48+
margin-right: 4px;
49+
color: white;
50+
border-radius: 4px;
51+
font-weight: bold;
52+
}
53+
.capacity-info {
54+
margin-top: 1rem;
55+
font-weight: bold;
56+
}
57+
.mid { color: #ffa500; font-weight: bold; }
58+
.valid { color: #4caf50; }
59+
.invalid { color: #f44336; }
60+
.back-link {
61+
display: block;
62+
margin-top: 2rem;
63+
text-align: center;
64+
}
65+
</style>
66+
</head>
67+
<body>
68+
<h1>📦 LeetCode 1011 运包裹问题可视化</h1>
69+
<div class="form">
70+
<input type="text" id="weightsInput" placeholder="请输入 weights，例如 1,2,3,4,5,6,7,8,9,10" value="1,2,3,4,5,6,7,8,9,10">
71+
<input type="number" id="daysInput" placeholder="请输入天数 days" value="5">
72+
<button onclick="visualize()">点击可视化</button>
73+
</div>
74+
<div id="log" class="log"></div>
75+
<div id="visualization"></div>
76+
<div class="back-link">
77+
<a href="index.html">⬅️ 返回首页</a>
78+
</div>
79+
<script>
80+
function canShip(weights, capacity) {
81+
const result = [];
82+
let current = [];
83+
let sum = 0;
84+
for (const w of weights) {
85+
if (sum + w > capacity) {
86+
result.push(current);
87+
current = [];
88+
sum = 0;
89+
}
90+
current.push(w);
91+
sum += w;
92+
}
93+
if (current.length) result.push(current);
94+
return result;
95+
}
96+
97+
function calcDays(weights, capacity) {
98+
let days = 0;
99+
let current = 0;
100+
for (const w of weights) {
101+
if (current + w > capacity) {
102+
days++;
103+
current = 0;
104+
}
105+
current += w;
106+
}
107+
if (current > 0) days++;
108+
return days;
109+
}
110+
111+
function visualize() {
112+
const log = document.getElementById("log");
113+
const visual = document.getElementById("visualization");
114+
log.innerHTML = "";
115+
visual.innerHTML = "";
116+
117+
const weights = document.getElementById("weightsInput").value.split(',').map(Number).filter(x => !isNaN(x));
118+
const days = parseInt(document.getElementById("daysInput").value);
119+
120+
if (!weights.length || isNaN(days) || days <= 0) {
121+
log.innerHTML = '<span style="color:red">请输入有效的 weights 和 days。</span>';
122+
return;
123+
}
124+
125+
let left = Math.max(...weights);
126+
let right = weights.reduce((a, b) => a + b, 0);
127+
128+
while (left <= right) {
129+
const mid = Math.floor((left + right) / 2);
130+
const needDays = calcDays(weights, mid);
131+
132+
const span = document.createElement("div");
133+
span.innerHTML = `🟠 当前尝试容量：<span class="mid">${mid}</span>，需要天数：<span class="${needDays <= days ? 'valid' : 'invalid'}">${needDays}</span>（目标天数：${days}）`;
134+
log.appendChild(span);
135+
136+
// 可视化当前的 mid 分组
137+
const daysArr = canShip(weights, mid);
138+
const dayContainer = document.createElement("div");
139+
dayContainer.innerHTML = `<div class="capacity-info">⛴️ 尝试容量 ${mid}，装载方案如下：</div>`;
140+
141+
daysArr.forEach((group, i) => {
142+
const dayDiv = document.createElement("div");
143+
dayDiv.className = "day";
144+
group.forEach(w => {
145+
const box = document.createElement("div");
146+
box.className = "box";
147+
box.textContent = w;
148+
dayDiv.appendChild(box);
149+
});
150+
dayContainer.appendChild(dayDiv);
151+
});
152+
153+
visual.appendChild(dayContainer);
154+
155+
if (needDays <= days) {
156+
right = mid - 1;
157+
} else {
158+
left = mid + 1;
159+
}
160+
}
161+
}
162+
</script>
163+
</body>
164+
</html>

‎index.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,13 @@ <h1>算法可视化 · 资源导航</h1>
170170
<a href="./T875-binary-search-eat-banana.html" target="_blank">打开页面</a>
171171
</div>
172172

173+
<div class="card" data-tags="T1011 binary search 二分查找 最大值 最小值">
174+
<div class="card-title">T1011. 在 D 天内送达包裹的能力 </div>
175+
<div class="card-desc">通过动画步骤演示二分法在某个值的范围内，寻找最小/最大满足条件的值的场景</div>
176+
<a href="./T1011-binary-search-capacity-to-ship-packages-within-d-days.html" target="_blank">打开页面</a>
177+
</div>
178+
179+
173180
</div>
174181

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

0 commit comments

Comments
 (0)