工资到账可视化：算清房租和生活开销，攒钱倒计时一眼看懂

每月工资到账，一到月底又不知道钱去哪了？这个单文件网页让你输入税后工资、固定生活开销、房租和攒钱目标，它马上画出「钱都去哪了」的环形图，再给出每个月能自由支配多少、多久能攒到目标，界面还是温暖有趣的动画风。
先看成品效果，再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署并公开分享。

这个工具做什么

它把「算工资」这件枯燥的事做成一张看得懂的账本：

输入四项就出结果：税后工资、生活固定支出、房租、攒钱目标，数字实时计算。
环形图看占比：房租、生活开销、自由支配、储蓄一目了然，悬停每一块还会放大高亮。
攒钱倒计时：根据每月能攒下的钱和你的目标，自动算出还需要多少个月。
动画呈现：数字滚动、金币飞出，让结果不再是干巴巴的数字。
暗色模式：一键切换，晚上看也不刺眼。
本地保存：输入值会记住，下次打开接着用。
手机电脑都能用：响应式布局，随屏幕宽度自动排。

码道开通（免费体验版）

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

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

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

进入 AI 开发者空间

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

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

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

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

任务描述

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

开发一个「工资到账可视化」单文件网页应用：输入税后工资、生活固定支出、房租和攒钱目标，自动算出每月可自由支配金额，用可交互的动画页面展示每一笔钱都去哪了，并给出多久能攒到目标的倒计时；界面温暖有趣，支持暗色模式，手机和电脑都能用，所有代码写在一个 index.html 里。完成后用部署功能部署成可访问的网页应用，生成一个公网可访问的分享链接，并告诉我访问地址。

这轮码道具体做了什么

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

在沙箱里探测运行环境后，创建 /workspace/salary-visualizer，并把应用骨架写入单文件 index.html。
一次性写出约 535 行 HTML + CSS + JS，包含环形图 SVG 绘制、数字滚动动画和金币飞出效果。
检测到 3000 和 3001 端口已占用后，最终选中 3002 端口，写一个轻量静态服务器并 curl 验证返回 HTTP 200。
随后拉起 DevBridge 隧道，把 3002 端口发布成 8 小时有效的公网 HTTPS 链接，并一步步确认公网 URL 确实返回这个工资可视化页面。

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

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

代码亮点

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

1. 用 SVG 手动画出环形图，悬停还有放大反馈

drawPie(parts) 把各项支出按比例转成 SVG 扇形路径，中心再挖一个圆洞，画成环形图；鼠标悬停时扇区变亮、放大：

path.setAttribute("d","M"+cx+" "+cy+" L"+x1+" "+y1+" A"+r+" "+r+" 0 "+large+" 1 "+x2+" "+y2+" Z");
path.setAttribute("fill",colors[p.k]);
path.setAttribute("opacity","0.92");
path.addEventListener("mouseenter",function(){path.setAttribute("opacity","1");path.style.transform="scale(1.04)"});
path.addEventListener("mouseleave",function(){path.setAttribute("opacity","0.92");path.style.transform="scale(1)"});
svg.appendChild(path);

2. 自由支配金额的计算只有一步

先读取四个输入，再用「税后工资 − 生活开销 − 房租」得到自由支配金额，储蓄比例由滑杆决定：

function compute(){
  var i=readInputs();
  state.salary=i.salary;state.life=i.life;state.rent=i.rent;state.goal=i.goal;
  state.free=Math.max(0,i.salary-i.life-i.rent);
  var ratio=parseInt($("saveRange").value,10)/100;
  state.save=Math.round(state.free*ratio);
}

3. 数字滚动动画让结果更直观

animateNum() 用 requestAnimationFrame 从旧值平滑滚到新值，而不是一下子跳到目标数字：

function animateNum(el,from,to,dur){
  var start=performance.now();
  function step(now){
    var p=Math.min(1,(now-start)/dur);
    var e=1-Math.pow(1-p,3);
    el.textContent=fmt(from+(to-from)*e);
    if(p<1)requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

直接下载试玩

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

Demo Park 仓库：https://atomgit.com/deli007/demo_park
本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-receipt-pain-point

总结

工资到账可视化的价值不在于「会算账」，而在于把「钱去哪了」和「还要攒多久」变成一眼能看懂的图形和倒计时。技术上主要练习了 SVG 环形图绘制、requestAnimationFrame 数字动画、百分比计算和 localStorage 持久化几处，后续还能加上自定义支出项、月度对比或导出账单明细。

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

posted @ 2026-09-03 11:57 新科技观察员阅读(26) 评论(0) 收藏举报

刷新页面返回顶部