房贷计算器：输入总价和利率，月供、总利息一眼看全用码道AI编程助手从零到一完成前端小游戏的完整实战记录：需求一句话生成可

准备买房，算月供和利息却要翻一堆表格？这个单文件网页输入房屋总价、首付比例、贷款年限和年利率，就能同时算出等额本息、等额本金两种方式的月供、总利息和总还款额，还画出每月还款变化曲线，首套/二套利率一键预设。先看成品，再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署并公开分享。

这个工具做什么

它是一个面向购房场景的房贷计算器，把最常问的几笔账一次算清：

双还款方式对比：等额本息、等额本金同时计算，月供、总利息、总还款额并排展示，并给出两种方式的利息差额。
首套 / 二套利率预设：商贷首套 3.10%、二套 3.575%，公积金首套 2.85%、二套 3.325%，点一下即应用。
每月还款变化图：用 Canvas 画出两条曲线，等额本息是一条水平线，等额本金逐月递减，一眼看出压力变化。
每月明细表：期数、月供、本金、利息、剩余本金逐月列出，可切换两种方式查看。
实时重算：修改总价、首付比例或年限，立刻重新计算，不用反复点按钮。

房贷计算器运行界面

码道开通（免费体验版）

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

developer.huaweicloud.com/codeartsco.…

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

进入 AI 开发者空间

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

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

AI 开发者空间主界面

打开后码道 WebUI 的底部输入框提示「尽管吩咐，我来帮你搞定」：

码道 WebUI 对话窗口

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

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送（模型默认 glm-5.2，可直接用）：

开发一个「房贷计算器」单文件网页应用：输入房屋总价、首付比例、贷款年限和年利率，分别按等额本息和等额本金两种方式计算月供、总利息和总还款额，并用简单图表或明细表展示每月还款变化；支持首套/二套常见利率预设，界面清晰，手机和电脑都能用，所有代码写在一个 index.html 里。完成后用部署功能部署成可访问的网页应用，并告诉我访问地址。

任务完成

这轮码道具体做了什么

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

在沙箱里创建 /workspace/mortgage-calculator，一次性写入单文件 index.html，没有外部依赖。
检测空闲端口时发现默认 python3 环境被污染，改用 bash 的 /dev/tcp 探测端口，并选中 3004 端口。
用干净的环境变量 env -u PYTHONHOME -u PYTHONPATH 启动 http.server，绑定 0.0.0.0:3004 并验证返回 200。
拼出内部预览地址后，再调用 DevBridge 隧道把 3004 端口发布成 8 小时有效的公网地址，并逐段验证标题与页面内容。

这次实际生成的临时公网地址（8 小时有效）： wli6ljbz-3004.cn-north-4-bridge.myhuaweicloud.com/

这个地址是 DevBridge 生成的临时部署入口，适合演示和验收，不适合作为长期访问地址；到期后读者可以按后面的「直接下载试玩」把 index.html 下载到本地打开。

代码亮点

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

1. 月供用标准公式，明细逐月推演

等额本息用复利公式一次算出固定月供，再逐月把「利息 = 剩余本金 × 月利率」摊开，得到本金和剩余本金：

var M = P*r*Math.pow(1+r,n)/(Math.pow(1+r,n)-1);
var bal = P;
for(var i=1;i<=n;i++){
  var intr = bal*r;
  var prin = M-intr;
  var bal2 = bal-prin;
  eqi.push({i:i, month:M, prin:prin, int:intr, bal:Math.max(bal2,0)});
  bal = bal2;
}

2. 两种方式并行算，一次返回对比结果

compute() 同时算出等额本息和等额本金的月供、利息、总还款额，并用 reduce 汇总，render() 再直接显示差额：

var sum = function(arr,k){ return arr.reduce(function(s,x){ return s+x[k]; },0); };
return {
  P:P, n:n, years:years, down:down, price:price, rate:ratePct,
  eqi:{rows:eqi, month:eqi[0].month, interest:sum(eqi,'int'), total:sum(eqi,'month')},
  eqp:{rows:eqp, month:eqp[0].month, interest:sum(eqp,'int'), total:sum(eqp,'month'), lastMonth:eqp[eqp.length-1].month}
};

3. 图表按设备像素比缩放，曲线绘制复用同一个 `plot`

drawChart() 先按 devicePixelRatio 校正 Canvas 尺寸，再让 plot 同时画「水平线 + 递减线」，并给两条线分别填充渐变底色：

var dpr = window.devicePixelRatio || 1;
var w = cv.clientWidth, h = cv.clientHeight;
cv.width = w*dpr; cv.height = h*dpr; ctx.scale(dpr,dpr);

function plot(rows,color,fill){
  ctx.beginPath();
  rows.forEach(function(p,idx){
    var x = padL + cw*(p.i-1)/(n-1||1);
    var y = padT + ch*(1-(p.month-yMin)/(yMax-yMin));
    if(idx===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);
  });
  ctx.strokeStyle = color; ctx.stroke();
}
plot(res.eqi.rows,'#10b981','rgba(16,185,129,.10)');
plot(res.eqp.rows,'#f59e0b','rgba(245,158,11,.10)');

4. 近三百行明细用 `DocumentFragment` 一次挂载

renderTable() 生成每月明细行时先放进 DocumentFragment，最后一次性追加到表格，避免高频触发页面回流：

var frag = document.createDocumentFragment();
for(var k=0;k<rows.length;k++){
  var p = rows[k];
  var tr = document.createElement('tr');
  tr.innerHTML = '<td>'+p.i+'</td><td>'+fmt(p.month)+'</td><td>'+fmt(p.prin)+'</td><td>'+fmt(p.int)+'</td><td>'+fmt(p.bal)+'</td>';
  frag.appendChild(tr);
}
tb.appendChild(frag);

直接下载试玩

本次生成的项目就是单文件 index.html，没有一个第三方依赖，把文件保存到本地后双击用浏览器打开即可运行。后续进入发布流程时，会把源码同步到公开 Demo Park 仓库，方便直接复制：

Demo Park 仓库：atomgit.com/deli007/dem…
本案例目录：atomgit.com/deli007/dem…

总结

房贷计算的关键不是把公式写出来，而是把「两种还款方式」放到同一屏对比，并让利率预设贴近实际。这个小工具把输入、计算、图表、明细做成一体，改动空间也很大，比如增加提前还款试算、组合贷或等额本金/本息切换后的累计利息曲线。技术上主要练习了复利计算、Canvas 图表和长列表渲染优化，数据都在本地计算，不会把购房信息传出去。

如果还没用过码道，可以免费开通体验版：developer.huaweicloud.com/codeartsco.…

房贷计算器：输入总价和利率，月供、总利息一眼看全