T learn.traeai

第 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

动手,把理解变成成果

本节练习

正在读取本机草稿…

完善计算函数,处理空值、负数、非整数人数和超大金额,再设计存储失败提示。

83 / 6000 字。本页不执行代码;可下载后在本地运行,或用 Agent 获取定性建议。

给我一个提示

分别测空输入和0输入。

查看参考思路(本站预写,非实时 Agent)

先检查字符串,再检查数字与范围,转成分后计算;存储失败提示未保存并提供下载,不清空。

人工自评:逐项核对自己的作品

这些勾选由你确认,不是自动测试结果。遇到待测项,请在作品里明确注明。

理解自测

localStorage意味着?

自己的学习笔记

0 / 3000 字 · 仅保存在此浏览器

围绕当前章节学习

Agent 答疑与作品评价

正在检查连接…

本站讲解、提示、参考思路和自测可独立使用。连接模型服务后,才能实时提问或评价;这里不会把预写内容伪装为 Agent 回答。

走完学习闭环

完成本节

保留练习、勾选人工自评并通过自测后,可记录完成。修改作品或答案会重新打开本节。

课程进度:0 / 6 · 本机记录,不是外部官方证书

下一节:用测试定位错误 →
← 上一节:读懂最小网页结构