js 实现计算器

实现基础计算器功能

使用JavaScript实现一个基础计算器需要处理用户输入、运算逻辑和结果显示。以下是一个简单的实现方案：

const display = document.getElementById('display');
const buttons = document.querySelectorAll('button');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const value = button.textContent;

    if (value === '=') {
      try {
        display.value = eval(display.value);
      } catch {
        display.value = 'Error';
      }
    } else if (value === 'C') {
      display.value = '';
    } else {
      display.value += value;
    }
  });
});

处理更复杂的运算逻辑

对于更复杂的计算器，需要实现更安全的运算处理：

function calculate() {
  let expression = display.value
    .replace(/×/g, '*')
    .replace(/÷/g, '/');

  try {
    const result = new Function('return ' + expression)();
    display.value = Number.isFinite(result) ? result : 'Error';
  } catch {
    display.value = 'Error';
  }
}

添加键盘支持

增强用户体验需要支持键盘输入：

document.addEventListener('keydown', (e) => {
  if (/[0-9+\-*/.=]/.test(e.key)) {
    e.preventDefault();
    const button = document.querySelector(`button[data-key="${e.key}"]`);
    button && button.click();
  } else if (e.key === 'Enter') {
    document.querySelector('button[value="="]').click();
  } else if (e.key === 'Escape') {
    document.querySelector('button[value="C"]').click();
  }
});

实现科学计算功能

扩展科学计算功能需要添加更多运算：

function handleScientificFunction(func) {
  const currentValue = parseFloat(display.value);

  switch(func) {
    case 'sqrt':
      display.value = Math.sqrt(currentValue);
      break;
    case 'pow':
      display.value = Math.pow(currentValue, 2);
      break;
    case 'sin':
      display.value = Math.sin(currentValue);
      break;
    // 添加其他科学计算函数
  }
}

完整的HTML结构示例

配套的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: 300px;
  margin: 0 auto;
  padding: 20px;
  background: #f4f4f4;
  border-radius: 10px;
}

#display {
  width: 100%;
  height: 50px;
  margin-bottom: 10px;
  font-size: 24px;
  text-align: right;
}

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

button {
  height: 50px;
  font-size: 18px;
  border: none;
  background: #fff;
  cursor: pointer;
}

button:hover {
  background: #ddd;
}

处理连续运算

改进运算逻辑以支持连续运算：

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

function updateDisplay() {
  display.value = currentInput || '0';
}

function handleNumberInput(number) {
  currentInput = currentInput === '0' ? number : currentInput + number;
  updateDisplay();
}

function handleOperator(op) {
  if (currentInput && previousInput && operation) {
    compute();
  }
  operation = op;
  previousInput = currentInput;
  currentInput = '';
}

实现记忆功能

添加记忆功能存储计算结果：

const memory = {
  value: 0,
  add() {
    this.value += parseFloat(display.value) || 0;
  },
  subtract() {
    this.value -= parseFloat(display.value) || 0;
  },
  recall() {
    display.value = this.value;
  },
  clear() {
    this.value = 0;
  }
};

处理小数和负数

完善数字输入处理：

function handleDecimal() {
  if (!currentInput.includes('.')) {
    currentInput += currentInput ? '.' : '0.';
    updateDisplay();
  }
}

function handleSignChange() {
  currentInput = currentInput.startsWith('-') ? 
    currentInput.substring(1) : 
    '-' + currentInput;
  updateDisplay();
}