本文介绍如何通过html表单收集本金、年利率等参数，结合javascript实现逐年复利计算，并在每一年结束后暂停循环、弹出交互提示（如“是否继续投资？”），从而实现用户驱动的动态投资模拟流程。
要真正实现“每年结束时询问用户是否继续投资”，关键在于打破同步阻塞式for循环的惯性思维——浏览器中无法在for循环内部自然暂停并等待用户响应，因此必须改用事件驱动 + 状态管理的方式。虽然答案中使用了prompt()（简单但已不推荐用于生产环境），但更健壮、现代的方案是结合HTML表单与事件监听器，配合递归函数或async/await模拟“暂停-继续”逻辑。
以下是一个完整、可直接运行的教程示例：
✅ HTML 结构（基础表单）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>复利投资模拟器</title>
</head>
<body>
<h2>复利投资决策模拟</h2>
<form id="investmentForm">
<label>初始本金（元）：<input type="number" id="principal" value="100000" required /></label><br><br>
<label>年化利率（%）：<input type="number" id="rate" step="0.01" value="5" required /></label><br><br>
<button type="submit">开始模拟</button>
</form>
<div id="output"></div>
<div id="continuePrompt" style="margin-top: 1rem; display: none;">
<p id="yearSummary"></p>
<button id="continueBtn">✅ 继续投资</button>
<button id="cashoutBtn">? 立即赎回</button>
</div>
</body>
</html>✅ JavaScript 逻辑（事件驱动 + 状态机）
document.getElementById('investmentForm').addEventListener('submit', function(e) {
e.preventDefault();
// 获取用户输入
const principal = parseFloat(document.getElementById('principal').value);
const rate = parseFloat(document.getElementById('rate').value) / 100; // 转为小数
let year = 1;
const maxYears = 10;
let currentAmount = principal;
const outputEl = document.getElementById('output');
const promptEl = document.getElementById('continuePrompt');
const summaryEl = document.getElementById('yearSummary');
// 清空上一次结果
outputEl.innerHTML = '<h3>模拟过程：</h3>';
promptEl.style.display = 'none';
// 核心：递归函数替代 for 循环，实现可控暂停
function simulateYear() {
if (year > maxYears) {
outputEl.innerHTML += `<p>✅ 已完成全部 ${maxYears} 年投资！最终金额：<strong>$${currentAmount.toFixed(2)}</strong></p>`;
return;
}
// 计算本年复利（按年复利，即每年计息一次）
currentAmount = principal * Math.pow(1 + rate, year);
// 输出当前年份结果
const logLine = `第 ${year} 年：本金 $${principal.toFixed(2)} → 本利和 $${currentAmount.toFixed(2)}`;
outputEl.innerHTML += `<p>${logLine}</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2549" title="MemFree"><img
src="https://img.php.cn/upload/ai_manual/001/246/273/176907437622705.png" alt="MemFree" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2549" title="MemFree">MemFree</a>
<p>MemFree - 来自知识库和互联网的混合AI搜索，更快获取准确答案</p>
</div>
<a href="/ai/2549" title="MemFree" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a></a>”；</p>`;
// 若未到第10年，显示决策按钮；否则自动结束
if (year < maxYears) {
summaryEl.textContent = `第 ${year} 年结束。是否继续投资至第 ${year + 1} 年？`;
promptEl.style.display = 'block';
// 绑定一次性点击事件（防重复绑定）
document.getElementById('continueBtn').onclick = function() {
year++;
promptEl.style.display = 'none';
simulateYear(); // 递归进入下一年
};
document.getElementById('cashoutBtn').onclick = function() {
outputEl.innerHTML += `<p>? 用户选择赎回：第 ${year} 年末锁定收益 —— <strong>$${currentAmount.toFixed(2)}</strong></p>`;
promptEl.style.display = 'none';
};
} else {
// 第10年自动终止，无需提问
outputEl.innerHTML += `<p>? 恭喜！您已坚持10年，最终本利和：<strong>$${currentAmount.toFixed(2)}</strong></p>`;
}
}
// 启动第一年模拟
simulateYear();
});⚠️ 注意事项与最佳实践
- 不要依赖 prompt()/alert()：现代浏览器对这些方法有拦截或降级策略，且体验生硬、不支持样式定制。HTML+事件方式更可控、可访问、可测试。
- 利率单位统一：用户输入的是百分比（如 5 表示 5%），代码中需除以 100 转为小数（0.05）再参与计算。
- 数值精度处理：金融计算建议使用 toFixed(2) 显示，但内部运算仍应保持浮点精度，避免累积舍入误差；高精度场景可考虑 BigInt 或专用库（如 decimal.js）。
- 边界防护：务必对 parseFloat() 结果做 isNaN() 校验，防止非数字输入导致计算异常。
- 可扩展性提示：若需支持“部分赎回”“追加投资”等复杂逻辑，可将状态封装为对象（如 { principal, year, isCashOut: false }），便于维护。
通过这种结构化设计，你不仅实现了“每年暂停询问”的核心需求，还构建了一个可维护、可拓展、符合现代Web标准的投资模拟前端逻辑框架。
