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

本金、年利率、期限、复利频率填进去到期能拿多少、里面有多少是利息、几年能翻倍一眼看全再打开「每月定投」还能看「本金 定投」滚雪球滚到多少。折线图把资产增长画出来比干看数字直观。先看成品再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署上线。这个工具做什么它把一个理财里最常手算的「复利」问题做成了交互页面复利频率可选按年 / 按半年 / 按季 / 按月 / 按天期限支持按年或按月填。三大结果到期本息总额、利息收益、本金翻倍所需时间。每月定投打开开关补一个每月追加金额按「月末投入」逐月模拟。构成拆解结果下面标清楚「含本金多少」利息占总回报的百分比。SVG 折线图把资产增长和总投入成本两条线画出来利息就是两条线的间距。输入校验本金/利率/期限非法时给出明确提示不静默算错。码道开通免费体验版开始之前先免费开通码道体验版。不需要装任何软件浏览器就能用https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz开通后有三种使用方式WebUI浏览器对话、TUI终端命令行和桌面 IDEIDE 插件。本文用 WebUI 版演示。进入 AI 开发者空间浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_sourceopcsfsqutm_mediumwbwz弹窗「请选择要进入的版本」→ 点击体验版首次使用会跳到华为云登录页扫码登录一次后续浏览器会话复用弹窗「临时凭据自动配置」→ 点击同意沙箱自动创建进入 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)增长定投场景用一个循环逐月「先增长、再月末追加」每年打一个快照用于画图constgrow(amount,y){if(r0)returnamount;returnamount*Math.pow(1r/n,n*y);};letbalanceP;constyearly[{year:0,value:P,cost:P}];for(letm1;mtotalMonths;m){balancegrow(balance,1/12);// 当月增长balancePMT;// 月末追加投入if(m%120||mtotalMonths){yearly.push({year:m/12,value:balance,cost:PPMT*m});}}2. 本金翻倍时间对数公式直接算纯复利下翻倍年数用ln(2) / (n × ln(1 r/n))含定投时没有闭式解就逐月模拟直到资产达到 2 倍初始本金letdoubleYears;if(r0){doubleYearsMath.log(2)/(n*Math.log(1r/n));}else{doubleYearsInfinity;}letdoubleWithAddnull;if(PMT0){letbP;for(letm1;mtotalMonths*4;m){bgrow(b,1/12);bPMT;if(b2*P){doubleWithAddm/12;break;}}}3. 输入校验算之前先拦住脏数据本金、利率、期限三个值分别检查非法或负数命中就亮错误提示并直接返回避免静默输出 NaNif(isNaN(P)||P0){err.textContent请输入有效的本金;err.classList.add(show);return;}if(isNaN(r)||r0){err.textContent请输入有效的年利率;err.classList.add(show);return;}if(isNaN(termVal)||termVal0){err.textContent请输入有效的投资期限;err.classList.add(show);return;}4. SVG 折线图手写坐标系不用图表库图表用原生 SVG 元素动态生成先算maxV定 Y 轴上限再画网格线和 Y 轴标签最后把资产、成本两条折线连起来constmaxVMath.max(...data.map(dd.value),costEnd)*1.05;constXypadL(xMax0?y/xMax:0)*cw;constYvpadTch-(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?sourcedmzntgwsfsourceaddmzntgwwbwz