纯HTML无法实现计算器计算逻辑，因input的value是字符串导致“+”拼接而非相加，且HTML无事件监听、状态维护和表达式解析能力；表单提交会刷新页面、丢失状态，无法支持连续运算或退格等交互。
纯 HTML 无法实现计算器的计算逻辑，必须配合 JavaScript —— 因为 input 的 value 是字符串，+ 会拼接而非相加，且 HTML 本身没有事件监听、状态维护或表达式解析能力。
为什么不能只用 <form> + <input type="number"> 实现计算器
常见误解是把表单提交当“计算”，但实际会刷新页面、丢失中间状态、无法支持连续运算（如 2+3=5*2=10）或退格/括号等交互。更关键的是：value 始终是字符串，"2" + "3" 得到 "23"，不是 5；浏览器不会自动做类型转换或运算优先级处理。
-
<form>提交后页面跳转或重载，中断用户操作流 -
type="number"仅限制输入格式，不提供任何计算行为 - 无
onclick、onkeydown等事件响应机制，HTML 自身无法绑定交互 - 无法维护运算栈、区分数字键与运算符、处理小数点重复或除零等边界情况
display 区该用 <input disabled> 还是 <div>
推荐用 <div id="display">，而非 <input type="text" disabled>。前者语义更清晰（显示区不是输入控件），避免屏幕阅读器误读为可编辑字段，且 textContent 更新比 value 更直接、无光标干扰。
- 用
document.getElementById('display').textContent = '123'直接更新，无需处理焦点或选中状态 -
<input disabled>在部分安卓浏览器中仍可能触发软键盘，影响体验 - 若需支持键盘输入（如按
Enter触发计算），<div>配合tabindex="0"+keydown监听更可控
append() 和 calculate() 的核心逻辑怎么写才不出错
关键在于分离“输入拼接”和“表达式求值”：前者只负责构建字符串（如 "12+3*4"），后者用 eval() 或手动解析——但 eval() 有安全风险，生产环境应避免；初学可先用，但务必加校验。
立即学习“前端免费学习笔记（深入）”；
- 输入阶段要过滤非法字符：
if (!/^[0-9+\-*/.()]$/.test(val)) return - 防止连续运算符：
if (/[\+\-\*\/]$/.test(current)) current = current.slice(0, -1) + val - 小数点防重复：
if (val === '.' && current.includes('.')) return -
calculate()前先检查是否为空或仅含运算符，避免eval('')报错 - 除零需捕获：
try { result = eval(current) } catch (e) { display.textContent = 'Error' }
最易被忽略的是键盘事件兼容性：用户按 Backspace、Enter、= 键时，keydown 处理比 onclick 更自然，但需注意 event.key 在不同浏览器中返回值差异（如 Chrome 返回 "="，Firefox 可能返回 "Enter"）。
