第 4 节 · 本站原创中文课程 · 建议 25 分钟
输入校验、金额与草稿保存
学完能做:区分空值、合法零和本机存储。
先验证再计算
min与step帮助用户,但程序仍要检查有限数字、整数人数、非负预算。空字符串转数字会成为0,须先检查空值。金额用整数分,避免直接浮点计算与显示误差。
独立的计算函数
校验失败返回具体原因;成功返回结果。安全整数检查避免极大数字损失精度。更新页面用textContent,不把输入拼成HTML。
function calculate(peopleText, amountText) {
if (!peopleText.trim() || !amountText.trim()) return {error:"请填写字段"};
const people = Number(peopleText), amount = Number(amountText);
if (!Number.isInteger(people) || people < 0 || people > 10000) return {error:"人数无效"};
if (!Number.isFinite(amount) || !/^\d+(\.\d{1,2})?$/.test(amountText.trim())) return {error:"预算无效"};
const cents = Math.round(amount * 100);
if (!Number.isSafeInteger(people * cents)) return {error:"金额过大"};
return {total:(people * cents / 100).toFixed(2)};
} 本机保存不是同步
localStorage按站点和浏览器保存,清理数据会删除。JSON读取和写入都可能失败,需要捕获。保存成功才能提示已保存;失败保留当前草稿并允许下载。不要承诺跨设备恢复。
这是本站独立编写的讲解与示例,并非官方课程逐字翻译。理解之后,请完成下面的练习、自测和笔记。
参考来源:Build with Andrew