当前位置：首页 > JavaScript

js实现简单计算器

2026-04-04 08:02:10JavaScript

基础实现思路

创建一个简单的计算器需要处理用户输入、解析运算表达式、执行计算并显示结果。以下是基于HTML、CSS和JavaScript的实现方法。

js实现简单计算器

HTML结构

<div class="calculator">
  <input type="text" id="display" readonly>
  <div class="buttons">
    <button onclick="appendToDisplay('7')">7</button>
    <button onclick="appendToDisplay('8')">8</button>
    <button onclick="appendToDisplay('9')">9</button>
    <button onclick="appendToDisplay('/')">/</button>
    <button onclick="appendToDisplay('4')">4</button>
    <button onclick="appendToDisplay('5')">5</button>
    <button onclick="appendToDisplay('6')">6</button>
    <button onclick="appendToDisplay('*')">*</button>
    <button onclick="appendToDisplay('1')">1</button>
    <button onclick="appendToDisplay('2')">2</button>
    <button onclick="appendToDisplay('3')">3</button>
    <button onclick="appendToDisplay('-')">-</button>
    <button onclick="appendToDisplay('0')">0</button>
    <button onclick="appendToDisplay('.')">.</button>
    <button onclick="calculate()">=</button>
    <button onclick="appendToDisplay('+')">+</button>
    <button onclick="clearDisplay()">C</button>
  </div>
</div>

CSS样式

.calculator {
  width: 200px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}

#display {
  width: 100%;
  margin-bottom: 10px;
  padding: 5px;
  font-size: 20px;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

button {
  padding: 10px;
  font-size: 18px;
  cursor: pointer;
}

JavaScript逻辑

let currentInput = '';

function appendToDisplay(value) {
  currentInput += value;
  document.getElementById('display').value = currentInput;
}

function clearDisplay() {
  currentInput = '';
  document.getElementById('display').value = '';
}

function calculate() {
  try {
    const result = eval(currentInput);
    document.getElementById('display').value = result;
    currentInput = result.toString();
  } catch (error) {
    document.getElementById('display').value = 'Error';
    currentInput = '';
  }
}

安全改进方案

直接使用eval()存在安全风险，建议改用解析器或更安全的计算方式：

js实现简单计算器

function calculate() {
  const tokens = currentInput.match(/(\d+\.?\d*)|([+\-*/])/g);
  if (!tokens) return;

  let result = parseFloat(tokens[0]);
  for (let i = 1; i < tokens.length; i += 2) {
    const operator = tokens[i];
    const operand = parseFloat(tokens[i + 1]);

    switch (operator) {
      case '+': result += operand; break;
      case '-': result -= operand; break;
      case '*': result *= operand; break;
      case '/': result /= operand; break;
      default: return 'Error';
    }
  }

  document.getElementById('display').value = result;
  currentInput = result.toString();
}