原生HTML+JavaScript计算器需HTML构建按钮与只读输入框，JS用事件委托绑定点击、维护表达式状态、清理末尾运算符后调用eval或手动解析；须防重复小数点、运算符连按、空小数等异常，并支持键盘输入与移动端快速点击优化。
用原生 HTML + JavaScript 实现基础计算器逻辑
纯 HTML 无法完成计算，必须配合 JavaScript。最简方案是：HTML 写结构（按钮和显示框），JS 绑定点击事件、维护表达式状态、调用 eval() 或手动解析计算。不推荐直接用 eval() 处理用户输入，但对学习用的静态计算器可接受。
常见错误是把所有数字拼成字符串后直接 eval('1+2+') ——末尾运算符会报 SyntaxError。得在执行前清理末尾符号，或用状态机区分“等待数字”和“等待运算符”。
- 显示区域用
<input type="text" id="display" readonly>，避免用户误输 - 每个按钮的
value设为对应字符（如'+'、'7'），JS 中统一取event.target.value - 清空（C）按钮设
value="C"，等号（=）设value="="，便于条件判断 - 不要用
click事件监听每个按钮，用事件委托绑定到父容器更轻量
如何安全处理连续运算和小数点
用户可能连按 1 . . 5 + . 3 =，需要防止重复小数点、空小数（如 .+）、运算符连按（1++2）。关键不是拦截按键，而是控制内部状态变量：
- 用布尔值
waitingForNextNumber标记是否刚按过=或运算符，决定新数字是否覆盖显示 - 用正则
/\.$/.test(currentInput)检查末尾是否已有小数点，再决定是否拼接 - 运算符按钮按下时，若上一个字符是运算符（如
1 + - 2），直接替换而非追加 - 小数点只能出现在数字后，不能出现在表达式开头或运算符后（除非是负数，但简单计算器通常不支持负数输入）
为什么不用 calc() CSS 函数做计算
calc() 是 CSS 运行时布局计算函数，只用于长度、角度等样式值，比如 width: calc(100% - 20px)。它完全无法响应按钮点击、读取用户输入、执行四则运算。把它当 JS 计算器用属于概念混淆，浏览器会直接忽略无效用法。
立即学习“前端免费学习笔记（深入）”；
曾有人试图写 style="width: calc(1px * data-value)" 来“取值”，这是不可行的：data- 属性不会被 calc() 解析，CSS 无运行时变量机制。
移动端点击延迟与按钮反馈优化
在 iOS Safari 等浏览器中，click 事件有约 300ms 延迟，导致按钮按下去没反应。解决方式不是加 touchstart（可能引发双触发），而是给 <html> 加 viewport 元标签并启用快速点击：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
同时确保按钮有明确的 cursor: pointer 和背景色变化（哪怕只是 :active { opacity: 0.8; }），否则用户会觉得没点中。别依赖 :hover，移动端不触发 hover。
真正容易被忽略的是退格键（Backspace）和键盘输入支持——很多人只做了鼠标点击，但用户习惯敲键盘。加一句 document.addEventListener('keydown', handleKeydown)，映射 0-9、+、-、*、/、Enter、Escape 即可，比想象中简单。
