原生HTML+JS计算器最小可行版已实现：用currentValue/previousValue/operator三变量管理状态，支持数字输入、小数点防重、运算符替换、等号计算、除零报错、清屏重置，所有逻辑内联于单文件index.html中。
用原生 HTML + JavaScript 实现基础计算器，不需要框架
直接能跑的最小可行版本：一个 index.html 文件，含输入框、数字/运算符按钮、等号和清空功能。核心逻辑全靠原生 eval()（仅限学习场景，生产环境禁用）或手动解析——这里选更安全的手动计算方式。
常见错误现象：NaN 输出、连续点运算符卡死、小数点重复输入、负号处理错乱。根本原因是没做操作符状态管理和输入合法性校验。
- 所有按钮用
<button>，绑定onclick或事件委托，避免内联 JS 冗余 - 用单个
<input type="text">作显示屏，readonly防止手输干扰 - 维护三个关键变量：
currentValue（当前输入数字）、previousValue（上一次结果）、operator（待执行的运算符），比拼字符串再eval更可控 - 点击数字时：若上一步是等号（
shouldResetScreen === true），先清屏；否则追加到currentValue - 点击
.时：检查currentValue是否已含小数点，有则忽略
处理运算符点击和等号逻辑的关键分支
用户点 +、-、*、/ 时，不能立刻计算，要等下次输入或按 = 才触发。容易踩的坑是：点两次 + 就把前一个覆盖掉，导致 5 + + 3 这种非法表达式。
- 第一次点运算符：把当前
currentValue存为previousValue，记录operator，清空currentValue - 第二次点同一运算符（如
5 + → +）：不更新previousValue，只刷新operator（支持替换，比如5 + 3 → -变成5 - 3） - 点
=时：若operator存在且currentValue非空，才执行计算；结果存入previousValue，并设shouldResetScreen = true - 点
C：重置全部变量，屏幕清空，shouldResetScreen = false
兼容性与边界情况必须手动处理
原生 JS 的 parseFloat() 对 "007" 返回 7，但用户可能想输入八进制？不需要。这里统一按十进制处理，重点防除零、溢出和空操作。
立即学习“前端免费学习笔记（深入）”；
-
Infinity或NaN出现时，立即显示"Error"并锁定输入（设disabled或忽略后续点击） - 除零判断放在计算函数里：
if (operator === '/' && parseFloat(currentValue) === 0)→ 报错 - 数字过长（如超过 15 位）截断显示，避免科学计数法污染界面：
currentValue.slice(0, 12) - 移动端需加
touchstart事件或ontouchstart兼容，否则按钮点击无响应
完整可运行的 index.html 片段（复制即用）
<!DOCTYPE html>
<html>
<head><title>简易计算器</title></head>
<body>
<input type="text" id="display" readonly value="">
<div>
<button onclick="append('7')">7</button>
<button onclick="append('8')">8</button>
<button onclick="append('9')">9</button>
<button onclick="setOperator('/')">/</button>
</div>
<div>
<button onclick="append('4')">4</button>
<button onclick="append('5')">5</button>
<button onclick="append('6')">6</button>
<button onclick="setOperator('*')">*</button>
</div>
<div>
<button onclick="append('1')">1</button>
<button onclick="append('2')">2</button>
<button onclick="append('3')">3</button>
<button onclick="setOperator('-')">-</button>
</div>
<div>
<button onclick="append('0')">0</button>
<button onclick="append('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="clearAll()">C</button>
</div>
<p><script>
let currentValue = '';
let previousValue = '';
let operator = null;
let shouldResetScreen = false;
const display = document.getElementById('display');</p><pre class='brush:php;toolbar:false;'>function updateDisplay() {
display.value = currentValue || '0';
}
function append(val) {
if (shouldResetScreen) {
currentValue = '';
shouldResetScreen = false;
}
if (val === '.' && currentValue.includes('.')) return;
currentValue += val;
}
function setOperator(op) {
if (currentValue === '') return;
if (previousValue !== '' && operator) calculate();
previousValue = currentValue;
operator = op;
currentValue = '';
}
function calculate() {
if (operator === null || currentValue === '' || previousValue === '') return;
const prev = parseFloat(previousValue);
const current = parseFloat(currentValue);
let result;
switch (operator) {
case '+': result = prev + current; break;
case '-': result = prev - current; break;
case '*': result = prev * current; break;
case '/':
if (current === 0) { display.value = 'Error'; return; }
result = prev / current;
break;
default: return;
}
currentValue = String(result);
operator = null;
previousValue = '';
shouldResetScreen = true;
}
function clearAll() {
currentValue = '';
previousValue = '';
operator = null;
shouldResetScreen = false;
updateDisplay();
}
updateDisplay();</script> </body> </html>
真正难的不是写出来，是让 0.、-5+3、1000000000000000+1 这些边缘输入不崩、不误导用户。多数人卡在状态管理没闭环，而不是语法不会写。
