JavaScript 中怎么用 DOM 操作实现一个网页端的计算器-js教程-PHP中文网

用原生 javascript 实现网页计算器，核心是事件委托监听按钮、字符串拼接表达式、分步解析计算（先乘除后加减），配合防错处理与键盘支持，无需框架即可完成。

javascript 中怎么用 dom 操作实现一个网页端的计算器

用 JavaScript 的 DOM 操作实现网页计算器，核心是监听按钮点击、读取输入、执行计算、更新显示——不需要框架，纯原生即可完成，关键在事件绑定、字符串运算处理和防错逻辑。

HTML 结构：用语义化标签搭好骨架

一个清晰的结构让 JS 更容易定位元素。推荐用 <input type="text"> 作显示屏（支持选中复制），按钮用 <button></button> 并设置 data-value 属性标识功能：

<div id="calculator">
  <input type="text" id="display" readonly><div class="buttons">
    <button data-value="clear">C</button>
    <button data-value="back">⌫</button>
    <button data-value="/">÷</button>
    <button data-value="7">7</button>
    <button data-value="8">8</button>
    <button data-value="9">9</button>
    <button data-value="*">×</button>
    <!-- 其他数字和运算符 -->
    <button data-value="=">=</button>
  </div>
</div>

JS 逻辑：分三步响应用户操作

获取元素、绑定事件、处理状态。避免直接用 eval()，改用安全的分步解析或 Function 构造器（仅限可信输入）：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

监听所有按钮：用事件委托绑定到容器，减少监听器数量
区分按钮类型：根据 data-value 判断是数字、运算符、清除、退格还是等号
维护表达式状态：用字符串拼接表达式（如 "5+3*2"），点击 = 时解析执行

安全计算：不用 eval，手写简易解析器

为避免 eval 的安全与精度问题（如 0.1 + 0.2 !== 0.3），可对简单表达式做两级处理：

先按 +- 分割为项（如 "3*4-2/5" → ["3*4", "2/5"]）
每项再按 */ 计算，最后加减汇总
用 parseFloat 转数字，toFixed(10) 限制小数位，再用 parseFloat 去掉末尾零

示例函数片段：

function calculate(expr) {
  if (!expr || expr === 'Error') return '0';
  try {
    // 简单替换 × ÷ 为 * /
    expr = expr.replace(/×/g, '*').replace(/÷/g, '/');
    // 分步计算：先乘除，后加减（不支持括号）
    let parts = expr.split(/(?=[+-])/);
    let result = 0;
    for (let part of parts) {
      if (!part) continue;
      let sub = part.replace(/^[+-]/, '');
      let op = part[0] === '-' ? -1 : 1;
      let val = Function('"use strict"; return (' + sub + ')')();
      result += op * parseFloat(val.toFixed(10));
    }
    return parseFloat(result.toFixed(10)).toString();
  } catch {
    return 'Error';
  }
}