js函数实现简单计算器

实现简单计算器的JavaScript函数

创建一个简单的计算器函数需要处理基本的加减乘除运算。以下是一个实现示例：

function calculate(num1, operator, num2) {
  switch (operator) {
    case '+':
      return num1 + num2;
    case '-':
      return num1 - num2;
    case '*':
      return num1 * num2;
    case '/':
      if (num2 === 0) {
        return "Error: Division by zero";
      }
      return num1 / num2;
    default:
      return "Error: Invalid operator";
  }
}

扩展功能计算器实现

更完整的计算器可以包含连续运算和记忆功能：

class Calculator {
  constructor() {
    this.currentValue = 0;
    this.pendingOperation = null;
    this.pendingValue = 0;
  }

  operate(number, operation) {
    if (this.pendingOperation) {
      this.calculate();
    }
    this.pendingOperation = operation;
    this.pendingValue = number;
  }

  calculate() {
    switch (this.pendingOperation) {
      case '+':
        this.currentValue += this.pendingValue;
        break;
      case '-':
        this.currentValue -= this.pendingValue;
        break;
      case '*':
        this.currentValue *= this.pendingValue;
        break;
      case '/':
        if (this.pendingValue === 0) {
          return "Error: Division by zero";
        }
        this.currentValue /= this.pendingValue;
        break;
      default:
        this.currentValue = this.pendingValue;
    }
    this.pendingOperation = null;
    this.pendingValue = 0;
    return this.currentValue;
  }

  clear() {
    this.currentValue = 0;
    this.pendingOperation = null;
    this.pendingValue = 0;
  }
}

处理用户输入的HTML计算器

结合HTML和JavaScript创建完整的计算器界面：

<input type="text" id="display" disabled>
<div class="buttons">
  <button onclick="appendNumber(7)">7</button>
  <button onclick="appendNumber(8)">8</button>
  <button onclick="appendNumber(9)">9</button>
  <button onclick="setOperation('/')">/</button>

  <button onclick="appendNumber(4)">4</button>
  <button onclick="appendNumber(5)">5</button>
  <button onclick="appendNumber(6)">6</button>
  <button onclick="setOperation('*')">*</button>

  <button onclick="appendNumber(1)">1</button>
  <button onclick="appendNumber(2)">2</button>
  <button onclick="appendNumber(3)">3</button>
  <button onclick="setOperation('-')">-</button>

  <button onclick="appendNumber(0)">0</button>
  <button onclick="clearDisplay()">C</button>
  <button onclick="calculateResult()">=</button>
  <button onclick="setOperation('+')">+</button>
</div>

<script>
let currentInput = '';
let previousInput = '';
let operation = null;

function appendNumber(num) {
  currentInput += num;
  updateDisplay();
}

function setOperation(op) {
  if (currentInput === '') return;
  if (previousInput !== '') {
    calculateResult();
  }
  operation = op;
  previousInput = currentInput;
  currentInput = '';
}

function calculateResult() {
  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 = '';
  updateDisplay();
}

function clearDisplay() {
  currentInput = '';
  previousInput = '';
  operation = null;
  updateDisplay();
}

function updateDisplay() {
  document.getElementById('display').value = currentInput;
}
</script>

处理浮点数运算

JavaScript浮点数运算可能存在精度问题，可以使用toFixed方法限制小数位数：

function calculate(num1, operator, num2) {
  const result = /* 基本运算逻辑 */;
  return parseFloat(result.toFixed(4));
}

支持键盘输入的计算器

为HTML计算器添加键盘事件监听：

document.addEventListener('keydown', function(event) {
  if (event.key >= '0' && event.key <= '9') {
    appendNumber(event.key);
  } else if (['+', '-', '*', '/'].includes(event.key)) {
    setOperation(event.key);
  } else if (event.key === 'Enter') {
    calculateResult();
  } else if (event.key === 'Escape') {
    clearDisplay();
  }
});

这些实现方案覆盖了从基础函数到完整交互式计算器的不同复杂度需求，可以根据具体应用场景选择合适的实现方式。