当前位置：首页 > JavaScript

js实现点击计算器

2026-03-01 21:11:01JavaScript

实现点击计算器的 JavaScript 代码

以下是一个简单的点击计算器的实现代码，包含基本的加减乘除功能：

// 获取计算器元素
const display = document.getElementById('display');
const buttons = document.querySelectorAll('button');

let currentInput = '';
let previousInput = '';
let operation = null;

// 为每个按钮添加点击事件
buttons.forEach(button => {
  button.addEventListener('click', () => {
    const value = button.textContent;

    if (value >= '0' && value <= '9') {
      currentInput += value;
      display.value = currentInput;
    } else if (value === '.') {
      if (!currentInput.includes('.')) {
        currentInput += value;
        display.value = currentInput;
      }
    } else if (value === 'C') {
      currentInput = '';
      previousInput = '';
      operation = null;
      display.value = '';
    } else if (value === '=') {
      if (previousInput && currentInput && operation) {
        currentInput = calculate(previousInput, currentInput, operation);
        display.value = currentInput;
        previousInput = '';
        operation = null;
      }
    } else {
      if (currentInput) {
        if (previousInput) {
          previousInput = calculate(previousInput, currentInput, operation);
          display.value = previousInput;
        } else {
          previousInput = currentInput;
        }
        operation = value;
        currentInput = '';
      }
    }
  });
});

// 计算函数
function calculate(a, b, op) {
  a = parseFloat(a);
  b = parseFloat(b);

  switch (op) {
    case '+':
      return (a + b).toString();
    case '-':
      return (a - b).toString();
    case '*':
      return (a * b).toString();
    case '/':
      return (a / b).toString();
    default:
      return '';
  }
}

对应的 HTML 结构

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

基本 CSS 样式

.calculator {
  width: 200px;
  margin: 0 auto;
}

#display {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  text-align: right;
}

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

button {
  height: 40px;
  font-size: 18px;
}