复利计算器：本金利率期限一填，滚了多少利息、总回报几倍直接出结果

本金、年利率、期限、复利频率填进去，到期能拿多少、里面有多少是利息、几年能翻倍，一眼看全；再打开「每月定投」，还能看「本金 + 定投」滚雪球滚到多少。折线图把资产增长画出来，比干看数字直观。先看成品，再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署上线。

这个工具做什么

它把一个理财里最常手算的「复利」问题做成了交互页面：

• 复利频率可选：按年 / 按半年 / 按季 / 按月 / 按天，期限支持按年或按月填。
• 三大结果：到期本息总额、利息收益、本金翻倍所需时间。
• 每月定投：打开开关补一个每月追加金额，按「月末投入」逐月模拟。
• 构成拆解：结果下面标清楚「含本金多少」，利息占总回报的百分比。
• SVG 折线图：把资产增长和总投入成本两条线画出来，利息就是两条线的间距。
• 输入校验：本金/利率/期限非法时给出明确提示，不静默算错。

码道开通（免费体验版）

开始之前，先免费开通码道体验版。不需要装任何软件，浏览器就能用：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

进入 AI 开发者空间

1. 浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz
2. 弹窗「请选择要进入的版本」→ 点击 体验版
3. 首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
4. 弹窗「临时凭据自动配置」→ 点击 同意，沙箱自动创建

进入 AI 开发者空间主界面后，先等左侧菜单加载出来，再找到 CodeArts，点击它右侧的浏览器图标，打开码道 WebUI 对话窗口：

打开后码道 WebUI 会先和你打招呼，下方就是需求输入框：

小贴士：体验版沙箱 3 小时后自动重置，生成完记得把 index.html 下载保存。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送：

开发一个「复利计算器」网页应用：输入本金、年利率、投资期限（支持年/月）和复利频率（按年/按半年/按季/按月/按天），即可计算到期本息总额、利息收益和本金翻倍所需时间；支持每月定期追加投入；结果用大数字卡片展示，并拆解本金/利息构成；界面简洁美观，单个网页打开即用。完成后用部署功能部署成可访问的网页应用，并告诉我访问地址。

这轮码道具体做了什么

不是复述通用 AI 能力，而是它在这篇项目里的实际动作：

• 先探测环境，发现 PYTHONHOME 污染的 python3 用不了，改用绝对路径 /usr/bin/python3 并 env -u PYTHONHOME -u PYTHONPATH 清理后找到空闲端口 3003。
• 创建 /workspace/compound-calculator，写出单文件 index.html（约 390 行），把样式、逻辑、SVG 图表全部内联。
• 用 python3 -m http.server 3003 --bind 0.0.0.0 后台起服务，curl 自检 HTTP 200，拼出内部访问地址。

代码亮点

以下是 index.html 里值得关注的设计思路和实现细节。

1. 复利增长 + 按月定投模拟

单笔金额按 amount × (1 + r/n)^(n×y) 增长；定投场景用一个循环逐月「先增长、再月末追加」，每年打一个快照用于画图：

const grow = (amount, y) => {
  if (r === 0) return amount;
  return amount * Math.pow(1 + r / n, n * y);
};

let balance = P;
const yearly = [{ year: 0, value: P, cost: P }];
for (let m = 1; m <= totalMonths; m++) {
  balance = grow(balance, 1 / 12); // 当月增长
  balance += PMT;                  // 月末追加投入
  if (m % 12 === 0 || m === totalMonths) {
    yearly.push({ year: m / 12, value: balance, cost: P + PMT * m });
  }
}

2. 本金翻倍时间：对数公式直接算

纯复利下翻倍年数用 ln(2) / (n × ln(1 + r/n))；含定投时没有闭式解，就逐月模拟直到资产达到 2 倍初始本金：

let doubleYears;
if (r > 0) { doubleYears = Math.log(2) / (n * Math.log(1 + r / n)); }
else { doubleYears = Infinity; }

let doubleWithAdd = null;
if (PMT > 0) {
  let b = P;
  for (let m = 1; m <= totalMonths * 4; m++) {
    b = grow(b, 1 / 12); b += PMT;
    if (b >= 2 * P) { doubleWithAdd = m / 12; break; }
  }
}

3. 输入校验：算之前先拦住脏数据

本金、利率、期限三个值分别检查非法或负数，命中就亮错误提示并直接返回，避免静默输出 NaN：

if (isNaN(P) || P < 0) { err.textContent = '请输入有效的本金'; err.classList.add('show'); return; }
if (isNaN(r) || r < 0) { err.textContent = '请输入有效的年利率'; err.classList.add('show'); return; }
if (isNaN(termVal) || termVal <= 0) { err.textContent = '请输入有效的投资期限'; err.classList.add('show'); return; }

4. SVG 折线图：手写坐标系不用图表库

图表用原生 SVG 元素动态生成，先算 maxV 定 Y 轴上限，再画网格线和 Y 轴标签，最后把资产、成本两条折线连起来：

const maxV = Math.max(...data.map(d => d.value), costEnd) * 1.05;
const X = y => padL + (xMax > 0 ? y / xMax : 0) * cw;
const Y = v => padT + ch - (v - minV) / (maxV - minV) * ch;

直接下载试玩

本次生成的项目就是单文件 index.html，没有第三方依赖，把文件保存到本地后双击用浏览器打开即可运行。源码同步到公开 Demo Park 仓库：

• Demo Park 仓库：https://atomgit.com/deli007/demo_park
• 本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-interest-calculator

总结

复利计算器把「本金、利率、期限、频率、定投」这五个变量收敛到一个页面：单笔复利用幂函数算，定投场景逐月模拟打快照，翻倍时间能公式就公式、不能就模拟，再用手写 SVG 折线图把增长画出来。后续还可以加复利频率的更多档位、通胀折现或「通胀调整后的真实收益率」。

如果还没用过码道，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz