231 lines
9.9 KiB
HTML
231 lines
9.9 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-Hans">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>077. 买卖股票的最佳时机 – 图解</title>
|
|||
|
|
<link rel="stylesheet" href="../shared/style.css">
|
|||
|
|
<style>.vis-area { min-height: 120px; padding: 16px 0; } .code-section { margin-top: 16px; }</style>
|
|||
|
|
</head>
|
|||
|
|
<body><div class="container">
|
|||
|
|
<h1>🟢 077. 买卖股票的最佳时机 <span class="badge easy">简单</span></h1>
|
|||
|
|
<p class="subtitle">分类：贪心 ｜ LeetCode Hot 100</p>
|
|||
|
|
<div class="controls" id="controls">
|
|||
|
|
<label>输入：</label><input type="text" id="inputArea" value="[7,1,5,3,6,4]">
|
|||
|
|
<button id="applyBtn" class="primary">生成图解</button>
|
|||
|
|
<select id="exampleSelect"></select>
|
|||
|
|
<span style="flex:1"></span>
|
|||
|
|
<button id="prevBtn">◀ 上一步</button>
|
|||
|
|
<button id="nextBtn">下一步 ▶</button>
|
|||
|
|
<button id="jumpBtn">⏭ 跳到结果</button>
|
|||
|
|
<button id="autoBtn">自动播放</button>
|
|||
|
|
<button id="resetBtn">重置</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="pipeline" id="pipeline"></div>
|
|||
|
|
<div class="hint info" id="hintBox"><span id="stepInfo"></span><br><span id="hintText"></span></div>
|
|||
|
|
<div class="panels">
|
|||
|
|
<div class="panel" id="mainPanel"><h3>📊 可视化</h3><div class="vis-area" id="vizArea"></div></div>
|
|||
|
|
<div class="panel-grid">
|
|||
|
|
<div class="panel" id="detailPanel"><h3>📝 当前步骤详情</h3><div id="detailContent"></div></div>
|
|||
|
|
<div class="panel" id="resultPanel"><h3>✅ 结果</h3><div id="resultContent"></div></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="panel code-section"><h3>💻 参考代码（Python）</h3><div id="codeArea"></div></div>
|
|||
|
|
<footer>Powered by QwenPaw · 图解算法 · LeetCode Hot 100</footer>
|
|||
|
|
</div>
|
|||
|
|
<script src="../shared/algo-viz.js"></script>
|
|||
|
|
<script>"use strict";(function(){
|
|||
|
|
const CODE = `def maxProfit(prices):
|
|||
|
|
min_price = float('inf')
|
|||
|
|
max_profit = 0
|
|||
|
|
for i, price in enumerate(prices):
|
|||
|
|
if price < min_price:
|
|||
|
|
min_price = price # 更新最低价
|
|||
|
|
elif price - min_price > max_profit:
|
|||
|
|
max_profit = price - min_price # 更新最大利润
|
|||
|
|
return max_profit`;
|
|||
|
|
|
|||
|
|
const EXAMPLES = [
|
|||
|
|
{ name: '例1: [7,1,5,3,6,4]', input: '[7,1,5,3,6,4]' },
|
|||
|
|
{ name: '例2: [7,6,4,3,1]', input: '[7,6,4,3,1]' },
|
|||
|
|
{ name: '例3: [2,4,1]', input: '[2,4,1]' },
|
|||
|
|
{ name: '例4: [3,2,6,5,0,3]', input: '[3,2,6,5,0,3]' },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
let controller = null;
|
|||
|
|
|
|||
|
|
function genSteps(prices) {
|
|||
|
|
const steps = [];
|
|||
|
|
let minPrice = Infinity;
|
|||
|
|
let minIdx = -1;
|
|||
|
|
let maxProfit = 0;
|
|||
|
|
let buyIdx = -1, sellIdx = -1;
|
|||
|
|
|
|||
|
|
steps.push({
|
|||
|
|
desc: '初始化：min_price = ∞, max_profit = 0',
|
|||
|
|
hint: '遍历价格数组，维护历史最低价和最大利润差。',
|
|||
|
|
detail: '<b>思路</b>：只需一次遍历。<br>• 遇到更低价格 → 更新 min_price<br>• 否则计算 price - min_price，若更大则更新 max_profit<br><br>时间复杂度 O(n)，空间 O(1)',
|
|||
|
|
hlLine: -1,
|
|||
|
|
arrCls: prices.map(() => ''),
|
|||
|
|
arrTags: prices.map(() => ''),
|
|||
|
|
minIdx: -1, curIdx: -1,
|
|||
|
|
maxProfit: 0, bestBuy: -1, bestSell: -1,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
prices.forEach((price, i) => {
|
|||
|
|
const arrCls = prices.map(() => '');
|
|||
|
|
const arrTags = prices.map(() => '');
|
|||
|
|
if (minIdx >= 0) arrCls[minIdx] = 'min-price';
|
|||
|
|
arrCls[i] = 'current';
|
|||
|
|
|
|||
|
|
if (price < minPrice) {
|
|||
|
|
const oldMin = minPrice;
|
|||
|
|
minPrice = price;
|
|||
|
|
minIdx = i;
|
|||
|
|
|
|||
|
|
arrCls[minIdx] = 'min-price';
|
|||
|
|
arrTags[minIdx] = '最低';
|
|||
|
|
|
|||
|
|
steps.push({
|
|||
|
|
desc: `i=${i}: prices[${i}] = ${price} < ${oldMin === Infinity ? '∞' : oldMin} → 更新最低价`,
|
|||
|
|
hint: `发现更低价格 ${price}，更新 min_price。此时卖出不产生利润，继续寻找更高卖价。`,
|
|||
|
|
detail: `prices[${i}] = <b>${price}</b><br>当前 min_price: ${oldMin === Infinity ? '∞' : oldMin} → <b>${minPrice}</b><br>max_profit 不变 = ${maxProfit}`,
|
|||
|
|
hlLine: 4,
|
|||
|
|
arrCls: [...arrCls], arrTags: [...arrTags],
|
|||
|
|
minIdx, curIdx: i, maxProfit, bestBuy, bestSell,
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
const profit = price - minPrice;
|
|||
|
|
if (profit > maxProfit) {
|
|||
|
|
maxProfit = profit;
|
|||
|
|
buyIdx = minIdx;
|
|||
|
|
sellIdx = i;
|
|||
|
|
|
|||
|
|
arrCls[sellIdx] = 'best';
|
|||
|
|
arrTags[sellIdx] = '利润' + profit;
|
|||
|
|
if (buyIdx >= 0) { arrCls[buyIdx] = 'min-price'; arrTags[buyIdx] = '买入'; }
|
|||
|
|
|
|||
|
|
steps.push({
|
|||
|
|
desc: `i=${i}: prices[${i}] = ${price}，利润 ${price} - ${minPrice} = ${profit} > ${maxProfit - profit === 0 && profit > 0 ? 0 : maxProfit - profit} → 更新最大利润`,
|
|||
|
|
hint: `当前利润 ${profit} 超过之前最大利润，更新 max_profit = ${profit}。`,
|
|||
|
|
detail: `prices[${i}] = <b>${price}</b><br>利润 = ${price} - ${minPrice} = <b>${profit}</b><br>max_profit 更新为 <b>${maxProfit}</b><br>买入: prices[${buyIdx}] = ${prices[buyIdx]}，卖出: prices[${sellIdx}] = ${prices[sellIdx]}`,
|
|||
|
|
hlLine: 6,
|
|||
|
|
arrCls: [...arrCls], arrTags: [...arrTags],
|
|||
|
|
minIdx, curIdx: i, maxProfit, bestBuy: buyIdx, bestSell: sellIdx,
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
steps.push({
|
|||
|
|
desc: `i=${i}: prices[${i}] = ${price}，利润 ${profit} ≤ ${maxProfit} → 不更新`,
|
|||
|
|
hint: `当前利润 ${profit} 未超过 max_profit(${maxProfit})，保持不变。`,
|
|||
|
|
detail: `prices[${i}] = <b>${price}</b><br>利润 = ${price} - ${minPrice} = ${profit}<br>max_profit 不变 = ${maxProfit}`,
|
|||
|
|
hlLine: 6,
|
|||
|
|
arrCls: [...arrCls], arrTags: [...arrTags],
|
|||
|
|
minIdx, curIdx: i, maxProfit, bestBuy: buyIdx, bestSell: sellIdx,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// final
|
|||
|
|
const finalCls = prices.map(() => '');
|
|||
|
|
const finalTags = prices.map(() => '');
|
|||
|
|
if (bestBuy >= 0) { finalCls[bestBuy] = 'min-price'; finalTags[bestBuy] = '买入'; }
|
|||
|
|
if (bestSell >= 0) { finalCls[bestSell] = 'best'; finalTags[bestSell] = '卖出'; }
|
|||
|
|
steps.push({
|
|||
|
|
desc: `遍历结束，最大利润 = ${maxProfit}`,
|
|||
|
|
hint: maxProfit > 0 ? `在 prices[${buyIdx}]=${prices[buyIdx]} 买入，prices[${sellIdx}]=${prices[sellIdx]} 卖出，利润 = ${maxProfit}` : '价格持续下降，无法获得正利润，返回 0',
|
|||
|
|
detail: `<b>最终结果</b>：max_profit = <b>${maxProfit}</b>${maxProfit > 0 ? `<br>买入点: i=${buyIdx}, price=${prices[buyIdx]}<br>卖出点: i=${sellIdx}, price=${prices[sellIdx]}` : ''}`,
|
|||
|
|
hlLine: -1,
|
|||
|
|
arrCls: finalCls, arrTags: finalTags,
|
|||
|
|
minIdx, curIdx: -1, maxProfit, bestBuy: buyIdx, bestSell: sellIdx,
|
|||
|
|
isFinal: true,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return steps;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function renderStep(step) {
|
|||
|
|
if (!step) {
|
|||
|
|
$('vizArea').innerHTML = '<div style="color:var(--text2);text-align:center;padding:40px;">点击「生成图解」开始</div>';
|
|||
|
|
$('detailContent').innerHTML = '';
|
|||
|
|
$('resultContent').innerHTML = '';
|
|||
|
|
$('stepInfo').textContent = '';
|
|||
|
|
$('hintText').textContent = '';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// pipeline info
|
|||
|
|
$('stepInfo').textContent = step.desc;
|
|||
|
|
$('hintText').textContent = step.hint;
|
|||
|
|
$('detailContent').innerHTML = step.detail;
|
|||
|
|
|
|||
|
|
// render array
|
|||
|
|
const prices = parseInput($('inputArea').value);
|
|||
|
|
const items = prices.map((p, i) => ({ val: p, cls: step.arrCls[i] || '', tag: step.arrTags[i] || '' }));
|
|||
|
|
renderArray($('vizArea'), items, { barMaxH: 140, barMinW: 36 });
|
|||
|
|
|
|||
|
|
// add legend
|
|||
|
|
const legend = document.createElement('div');
|
|||
|
|
legend.className = 'legend';
|
|||
|
|
legend.innerHTML = `
|
|||
|
|
<span class="legend-item"><span class="legend-dot" style="background:var(--green)"></span> 最低价/买入</span>
|
|||
|
|
<span class="legend-item"><span class="legend-dot" style="background:var(--orange)"></span> 当前遍历</span>
|
|||
|
|
<span class="legend-item"><span class="legend-dot" style="background:var(--accent)"></span> 卖出/最大利润</span>
|
|||
|
|
`;
|
|||
|
|
$('vizArea').appendChild(legend);
|
|||
|
|
|
|||
|
|
// stats
|
|||
|
|
const stats = document.createElement('div');
|
|||
|
|
stats.style.cssText = 'text-align:center;margin-top:12px;font-family:var(--mono);font-size:.85rem;';
|
|||
|
|
stats.innerHTML = `min_price = <span style="color:var(--green)">${step.minIdx >= 0 ? prices[step.minIdx] : '∞'}</span> max_profit = <span style="color:var(--orange)">${step.maxProfit}</span>`;
|
|||
|
|
$('vizArea').appendChild(stats);
|
|||
|
|
|
|||
|
|
// code highlight
|
|||
|
|
renderCode($('codeArea'), CODE, step.hlLine);
|
|||
|
|
|
|||
|
|
// result
|
|||
|
|
if (step.isFinal) {
|
|||
|
|
$('resultContent').innerHTML = `<div class="result-box">最大利润 = <span class="val">${step.maxProfit}</span>${step.bestBuy >= 0 ? `<br><small>买入 prices[${step.bestBuy}]=${prices[step.bestBuy]}，卖出 prices[${step.bestSell}]=${prices[step.bestSell]}</small>` : '<br><small>无正利润交易</small>'}</div>`;
|
|||
|
|
} else {
|
|||
|
|
$('resultContent').innerHTML = `<div style="color:var(--text2);font-size:.85rem;">等待遍历完成…</div>`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function parseInput(s) {
|
|||
|
|
try {
|
|||
|
|
const a = JSON.parse(s.replace(/'/g, '"'));
|
|||
|
|
if (Array.isArray(a) && a.every(x => typeof x === 'number')) return a;
|
|||
|
|
} catch(e) {}
|
|||
|
|
return [7,1,5,3,6,4];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function build() {
|
|||
|
|
const prices = parseInput($('inputArea').value);
|
|||
|
|
const steps = genSteps(prices);
|
|||
|
|
if (controller) controller.stopAuto();
|
|||
|
|
controller = new StepController(steps, { onRender: renderStep });
|
|||
|
|
$('nextBtn').onclick = () => controller.next();
|
|||
|
|
$('prevBtn').onclick = () => controller.prev();
|
|||
|
|
$('jumpBtn').onclick = () => controller.jumpEnd();
|
|||
|
|
$('resetBtn').onclick = () => controller.reset();
|
|||
|
|
$('autoBtn').onclick = () => { if (controller.autoTimer) controller.stopAuto(); else controller.startAuto(); };
|
|||
|
|
controller.next();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function init() {
|
|||
|
|
const sel = $('exampleSelect');
|
|||
|
|
EXAMPLES.forEach((ex, i) => {
|
|||
|
|
const o = document.createElement('option');
|
|||
|
|
o.value = i; o.textContent = ex.name;
|
|||
|
|
sel.appendChild(o);
|
|||
|
|
});
|
|||
|
|
sel.onchange = () => { $('inputArea').value = EXAMPLES[sel.value].input; build(); };
|
|||
|
|
$('applyBtn').onclick = build;
|
|||
|
|
$('inputArea').onkeydown = e => { if (e.key === 'Enter') build(); };
|
|||
|
|
build();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
|
|||
|
|
else init();
|
|||
|
|
})()</script>
|
|||
|
|
</body></html>
|