纯HTML无法实现计算器功能，因其缺乏运算能力，仅靠JavaScript才能完成数字转换、表达式解析、异常处理及DOM更新等核心逻辑。
纯 HTML 无法做出能算数的计算器——它连加法都做不到，因为 "2" + "3" 是字符串拼接得 "23"，不是数学结果 5。真正起作用的是 JavaScript，HTML 只负责画按钮和显示框。
为什么不能只写 HTML 就运行起来
常见误解是把两个 <input type="number"> 和一个提交按钮包进 <form>，以为浏览器会自动算。实际问题很直接：
-
value永远是字符串，不转类型就做+一定是拼接 -
onclick属性本身是 HTML 语法糖，背后必须有 JS 函数定义，否则点不动 - 连续输入
2+3*4=需要解析运算符优先级，HTML 没这个能力 - 除零、空输入、小数点重复、
Infinity继续参与后续计算……全靠 JS 主动拦截和重置
最简可运行结构里必须有的三样东西
删掉所有样式和扩展功能，一个能按、能输、能出结果的最小闭环就这三块：
- 显示区：
<div id="display">0</div>或<input id="display" readonly>（推荐后者，语义明确、键盘兼容好） - 按钮网格：每个
<button>带onclick调用 JS 函数，比如<button onclick="append('5')">5</button> - JS 逻辑：至少实现
append()（追加字符）、calculate()（执行计算）、clearAll()（清空状态）
关键函数怎么写才不出错
新手最容易栽在字符串拼接和类型转换上。核心逻辑不是“怎么画按钮”，而是“怎么安全读取并执行运算”：
立即学习“前端免费学习笔记（深入）”；
- 用
parseFloat()转数字，它比Number()更宽容（例如parseFloat("12.5.6")→12.5），但必须配合isNaN()检查，不能假设一定成功 - 除零必须显式判断：
if (operator === '/' && b === 0)，不能依赖eval("5/0")返回Infinity后继续算 - 小数点防重复：在
append('.')里先检查当前表达式是否已含.，否则允许插入 - 连续等号行为要明确定义，比如
2+3=5=是继续算5+3还是忽略？HTML 不帮你决定，得在calculate()里写死逻辑
DOM 更新千万别漏
很多调试失败是因为 JS 改了变量，但忘了更新页面显示。例如：
- 写了
current = '2+3'，但没写document.getElementById('display').textContent = current，界面上还是旧值 - 用了
keydown监听键盘，但 display 更新没放在事件处理函数体内，导致键盘输不进去 - 异步场景下（比如加了
setTimeout），display 更新必须显式调用，不能假设“改了变量就等于刷新了 UI”
真实项目中，表达式状态、当前输入、历史记录往往拆成多个变量（如 expression、lastResult、waitingForNextNumber），单一字符串拼接很难支撑复杂操作。
