当前位置：首页 > JavaScript

js实现计算器代码

2026-04-04 09:36:43JavaScript

基础HTML结构

创建计算器的基本HTML结构，包含显示屏和按钮区域：

<div id="calculator">
  <input type="text" id="display" disabled>
  <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="clearDisplay()">C</button>
    <button onclick="appendToDisplay('+')">+</button>

    <button onclick="calculate()">=</button>
  </div>
</div>

CSS样式设计

为计算器添加基本样式：

js实现计算器代码

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

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

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

button {
  padding: 10px;
  font-size: 18px;
  border: none;
  border-radius: 5px;
  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 = String(result);
  } catch (error) {
    document.getElementById('display').value = 'Error';
    currentInput = '';
  }
}

高级功能扩展

增加键盘支持功能：

js实现计算器代码

document.addEventListener('keydown', function(event) {
  const key = event.key;

  if (/[0-9+\-*/.=]/.test(key)) {
    if (key === '=' || key === 'Enter') {
      calculate();
    } else {
      appendToDisplay(key);
    }
  } else if (key === 'Escape') {
    clearDisplay();
  } else if (key === 'Backspace') {
    currentInput = currentInput.slice(0, -1);
    document.getElementById('display').value = currentInput;
  }
});

安全改进方案

替换eval()实现更安全的计算：

function safeCalculate(expression) {
  const operators = ['+', '-', '*', '/'];
  const parts = expression.split(/([+\-*/])/);

  let result = parseFloat(parts[0]);

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

    if (operators.includes(operator) && !isNaN(operand)) {
      switch(operator) {
        case '+': result += operand; break;
        case '-': result -= operand; break;
        case '*': result *= operand; break;
        case '/': result /= operand; break;
      }
    } else {
      throw new Error('Invalid expression');
    }
  }

  return result;
}

完整实现示例

将上述代码整合到HTML文件中：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 之前提供的CSS样式 */
  </style>
</head>
<body>
  <!-- 之前提供的HTML结构 -->

  <script>
    // 之前提供的JavaScript代码
    // 替换calculate()函数中的eval为safeCalculate
  </script>
</body>
</html>