怎样用js脚本制作简易计算器

使用js脚本制作简易计算器，核心是通过dom操作获取用户输入的数值和运算符，再结合计算逻辑返回结果并渲染到页面上，整个过程不需要依赖第三方库，仅用原生js就能完成。

一、计算器页面结构搭建

首先需要搭建计算器的基础页面结构，包含显示区域和按键区域，按键分为数字键、运算符键和清除、等于键。下面是基础的html结构代码：

<div class="calculator">
  <div class="display" id="display">0</div>
  <div class="keys">
    <button class="key clear" data-action="clear">C</button>
    <button class="key" data-action="divide">/</button>
    <button class="key" data-action="multiply">*</button>
    <button class="key" data-action="subtract">-</button>
    <button class="key" data-num="7">7</button>
    <button class="key" data-num="8">8</button>
    <button class="key" data-num="9">9</button>
    <button class="key" data-action="add">+</button>
    <button class="key" data-num="4">4</button>
    <button class="key" data-num="5">5</button>
    <button class="key" data-num="6">6</button>
    <button class="key" data-action="equals">=</button>
    <button class="key" data-num="1">1</button>
    <button class="key" data-num="2">2</button>
    <button class="key" data-num="3">3</button>
    <button class="key" data-num="0">0</button>
    <button class="key" data-num=".">.</button>
  </div>
</div>

二、基础样式设计

给计算器添加基础样式，让布局更规整，视觉上更符合常见计算器的形态，样式代码如下：

.calculator {
  width: 300px;
  margin: 50px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background-color: #f5f5f5;
}
.display {
  height: 60px;
  line-height: 60px;
  text-align: right;
  padding: 0 10px;
  font-size: 24px;
  background-color: #fff;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  border-radius: 3px;
  overflow: hidden;
}
.keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.key {
  height: 50px;
  font-size: 18px;
  border: none;
  border-radius: 3px;
  background-color: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
}
.key:hover {
  background-color: #e0e0e0;
}
.clear {
  background-color: #ff9800;
  color: #fff;
}
.clear:hover {
  background-color: #f57c00;
}

三、核心js逻辑实现

接下来编写js脚本，实现计算器的核心功能，包括数字输入、运算符选择、计算执行和清除操作。首先定义需要用到的变量和获取dom元素：

// 获取显示区域元素
const display = document.getElementById('display');
// 获取所有按键元素
const keys = document.querySelectorAll('.key');
// 定义变量存储当前输入的数值、上一个数值、当前选中的运算符
let currentInput = '0';
let previousInput = '';
let operator = null;
let shouldResetDisplay = false;

1. 更新显示区域

封装一个更新显示区域的函数，当输入内容或计算结果变化时调用：

function updateDisplay() {
  display.textContent = currentInput;
}

2. 处理数字输入

当点击数字键或小数点键时，需要将对应内容添加到当前输入中，同时处理开头为0、重复输入小数点等边界情况：

function inputNumber(num) {
  // 如果当前需要重置显示区域，先清空当前输入
  if (shouldResetDisplay) {
    currentInput = '';
    shouldResetDisplay = false;
  }
  // 处理开头为0的情况，除了输入小数点
  if (currentInput === '0' && num !== '.') {
    currentInput = num;
  } else {
    // 避免重复输入小数点
    if (num === '.' && currentInput.includes('.')) {
      return;
    }
    currentInput += num;
  }
  updateDisplay();
}

3. 处理运算符选择

当点击运算符键时，需要存储当前运算符，同时如果之前已经有未计算的表达式，先执行计算：

function inputOperator(nextOperator) {
  // 如果已经有运算符且未点击等于，先计算之前的表达式
  if (operator && !shouldResetDisplay) {
    calculate();
  }
  // 存储上一个输入值和当前运算符
  previousInput = currentInput;
  operator = nextOperator;
  // 标记下次输入时重置显示区域
  shouldResetDisplay = true;
}

4. 执行计算逻辑

封装计算函数，根据存储的运算符和两个数值执行对应运算，处理除数为0的异常情况：

function calculate() {
  let prev = parseFloat(previousInput);
  let current = parseFloat(currentInput);
  if (isNaN(prev) || isNaN(current)) {
    return;
  }
  let result;
  switch (operator) {
    case 'add':
      result = prev + current;
      break;
    case 'subtract':
      result = prev - current;
      break;
    case 'multiply':
      result = prev * current;
      break;
    case 'divide':
      // 处理除数为0的情况
      if (current === 0) {
        result = '错误';
      } else {
        result = prev / current;
      }
      break;
    default:
      return;
  }
  // 将结果转为字符串，处理小数精度问题
  currentInput = result.toString();
  operator = null;
  previousInput = '';
  updateDisplay();
}

5. 清除操作

点击清除键时，重置所有变量到初始状态：

function clearAll() {
  currentInput = '0';
  previousInput = '';
  operator = null;
  shouldResetDisplay = false;
  updateDisplay();
}

6. 绑定按键事件

给所有按键添加点击事件监听，根据按键的类型调用对应的处理函数：

keys.forEach(key => {
  key.addEventListener('click', () => {
    // 获取按键的数值属性
    const num = key.getAttribute('data-num');
    // 获取按键的操作属性
    const action = key.getAttribute('data-action');
    if (num !== null) {
      // 点击的是数字或小数点键
      inputNumber(num);
    } else if (action !== null) {
      // 点击的是操作键
      if (action === 'clear') {
        clearAll();
      } else if (action === 'equals') {
        calculate();
        shouldResetDisplay = true;
      } else {
        inputOperator(action);
      }
    }
  });
});

四、功能测试与边界优化

完成基础逻辑后，可以测试计算器的各项功能，比如连续运算、清除操作、除数为0的情况。如果有需要可以补充更多优化，比如限制显示区域的最大长度，支持键盘输入等。比如添加键盘事件支持的代码：

document.addEventListener('keydown', (e) => {
  const key = e.key;
  // 数字键和小数点
  if (/[d.]/.test(key)) {
    inputNumber(key);
  }
  // 运算符键
  else if (key === '+') {
    inputOperator('add');
  } else if (key === '-') {
    inputOperator('subtract');
  } else if (key === '*') {
    inputOperator('multiply');
  } else if (key === '/') {
    e.preventDefault();
    inputOperator('divide');
  }
  // 回车等于
  else if (key === 'Enter' || key === '=') {
    calculate();
    shouldResetDisplay = true;
  }
  // 清除键
  else if (key === 'Escape' || key === 'c' || key === 'C') {
    clearAll();
  }
});

到这里，一个功能完整的简易js计算器就制作完成了，整个流程覆盖了dom操作、事件监听、逻辑判断等js基础知识点，非常适合新手练习巩固。

js计算器javascript脚本前端交互dom操作修改时间：2026-06-16 18:45:51