index.html如何做一个简单的计算器？-html教程-PHP中文网

原生html+js计算器最小可行版已实现：用currentvalue/previousvalue/operator三变量管理状态，支持数字输入、小数点防重、运算符替换、等号计算、除零报错、清屏重置，所有逻辑内联于单文件index.html中。

index.html如何做一个简单的计算器？

用原生 HTML + JavaScript 实现基础计算器，不需要框架

直接能跑的最小可行版本：一个 index.html 文件，含输入框、数字/运算符按钮、等号和清空功能。核心逻辑全靠原生 eval()（仅限学习场景，生产环境禁用）或手动解析——这里选更安全的手动计算方式。

常见错误现象：NaN 输出、连续点运算符卡死、小数点重复输入、负号处理错乱。根本原因是没做操作符状态管理和输入合法性校验。

所有按钮用 <button></button>，绑定 onclick 或事件委托，避免内联 JS 冗余
用单个 <input type="text"> 作显示屏，readonly 防止手输干扰
维护三个关键变量：currentValue（当前输入数字）、previousValue（上一次结果）、operator（待执行的运算符），比拼字符串再 eval 更可控
点击数字时：若上一步是等号（shouldResetScreen === true），先清屏；否则追加到 currentValue
点击 . 时：检查 currentValue 是否已含小数点，有则忽略

处理运算符点击和等号逻辑的关键分支

用户点 +、-、*、/ 时，不能立刻计算，要等下次输入或按 = 才触发。容易踩的坑是：点两次 + 就把前一个覆盖掉，导致 5 + + 3 这种非法表达式。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

第一次点运算符：把当前 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` 片段（复制即用）


<title>简易计算器</title><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');</script></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();

html>

真正难的不是写出来，是让 0.、-5+3、1000000000000000+1 这些边缘输入不崩、不误导用户。多数人卡在状态管理没闭环，而不是语法不会写。