当前位置：首页 > JavaScript

js实现计算器代码

2026-01-30 17:54:14JavaScript

以下是一个简单的JavaScript计算器实现代码示例，包含基本运算功能（加、减、乘、除）和清除功能：

HTML结构

<div class="calculator">
  <input type="text" id="result" disabled>
  <div class="buttons">
    <button onclick="clearResult()">C</button>
    <button onclick="appendValue('7')">7</button>
    <button onclick="appendValue('8')">8</button>
    <button onclick="appendValue('9')">9</button>
    <button onclick="appendOperator('/')">/</button>
    <button onclick="appendValue('4')">4</button>
    <button onclick="appendValue('5')">5</button>
    <button onclick="appendValue('6')">6</button>
    <button onclick="appendOperator('*')">*</button>
    <button onclick="appendValue('1')">1</button>
    <button onclick="appendValue('2')">2</button>
    <button onclick="appendValue('3')">3</button>
    <button onclick="appendOperator('-')">-</button>
    <button onclick="appendValue('0')">0</button>
    <button onclick="appendValue('.')">.</button>
    <button onclick="calculate()">=</button>
    <button onclick="appendOperator('+')">+</button>
  </div>
</div>

CSS样式

.calculator {
  width: 200px;
  margin: 0 auto;
  padding: 20px;
  background: #f4f4f4;
  border-radius: 10px;
}

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

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

button {
  padding: 10px;
  font-size: 18px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background: #ddd;
}

JavaScript逻辑

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

function appendValue(value) {
  currentInput += value;
  document.getElementById('result').value = currentInput;
}

function appendOperator(op) {
  if (currentInput === '' && previousInput === '') return;
  if (previousInput !== '') {
    calculate();
  }
  operation = op;
  previousInput = currentInput;
  currentInput = '';
}

function calculate() {
  let result;
  const prev = parseFloat(previousInput);
  const current = parseFloat(currentInput);

  if (isNaN(prev) || isNaN(current)) return;

  switch (operation) {
    case '+':
      result = prev + current;
      break;
    case '-':
      result = prev - current;
      break;
    case '*':
      result = prev * current;
      break;
    case '/':
      result = prev / current;
      break;
    default:
      return;
  }

  currentInput = result.toString();
  operation = null;
  previousInput = '';
  document.getElementById('result').value = currentInput;
}

function clearResult() {
  currentInput = '';
  previousInput = '';
  operation = null;
  document.getElementById('result').value = '';
}