能跑起来的最小HTML计算器需用readonly文本框作显示屏、事件委托绑定按钮、仅用currentValue/previousValue/operator三变量管理状态，并手动校验小数点、连续运算符、除零等边界条件。
能跑起来的最小 HTML 计算器，不需要任何外部依赖，一个 index.html 文件就能打开运行 —— 关键是别在状态管理上翻车。
用 <input type="text"> 做显示屏，但必须加 readonly
很多人直接用 <div> 或 <p> 显示结果，结果发现无法对齐、选中文字干扰操作、移动端光标乱跳。用 <input type="text" id="result" readonly> 是最稳的选择：
-
readonly阻止用户手输，避免输入非法字符破坏状态 - 原生支持文本右对齐（
text-align: right），数字天然靠右显示 - 可直接用
element.value = "123"更新，比innerText更可靠 - 移动端软键盘不会意外弹出（
disabled会变灰且无法聚焦，readonly则保持可聚焦）
onclick 绑定按钮逻辑，但别写满 HTML 属性
初学容易把所有 JS 写进 onclick="appendNumber('7')" 这种内联方式里，调试困难、复用性差。推荐做法是：HTML 只留基础结构，JS 全部抽到 <script> 块里统一管理：
- 给每个按钮加
data-value属性，比如<button data-value="7">7</button> - 用
document.querySelector(".buttons").addEventListener("click", handleClick)做事件委托 - 在
handleClick里用event.target.dataset.value拿值，避免重复写二十个函数 - 特别注意
event.target可能是<span>或子元素，加个if (!target.matches("button")) return防误触
状态变量只用三个：currentValue、previousValue、operator
不用拼字符串再 eval()，也不用维护整个表达式栈。真实项目里最易崩的就是状态混乱：
立即学习“前端免费学习笔记（深入）”；
-
currentValue：当前正在输入的数字（如按了 1→2→3，就是"123"；按了小数点后是"123."） -
previousValue：上一次完整计算的结果（如5 + 3 =后，previousValue是8） -
operator：待执行的运算符（"+"、"-"、"*"、"/"），为空表示未进入运算流程 - 点
=时只在operator存在且currentValue !== ""时才计算，否则忽略 - 点
C必须重置全部三个变量，并清空input.value，不能只设""
小数点、连续运算符、除零这些坑，得手动拦住
浏览器不会帮你校验“能不能点小数点”或“能不能连按两个加号”。这些逻辑必须显式写死：
- 点
.前检查currentValue.includes(".") === false，已有就忽略 - 点运算符（如
+）时：若operator已存在且currentValue !== ""，先执行一次计算再更新operator；否则只存previousValue和新operator - 除零判断放在计算函数里：
if (operator === "/" && parseFloat(currentValue) === 0)→ 显示"Error"并设input.disabled = true锁死后续操作 - 数字过长（如超过 12 位）要截断：
currentValue = currentValue.slice(0, 12)，避免科学计数法污染界面
真正难的不是写完功能，而是让 5 + 3 * 4 - 2 = 这种混合运算不出错，或者按完 C 后再按数字能干净重启 —— 所有边界都得靠这三变量+显式条件兜住，没捷径。
