用js实现计算器

实现基础计算器功能

创建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="calculate()">=</button>
    <button onclick="appendToDisplay('+')">+</button>
    <button onclick="clearDisplay()">C</button>
  </div>
</div>

添加基本CSS样式：

#calculator {
  width: 200px;
  margin: 0 auto;
  padding: 20px;
  background: #f0f0f0;
  border-radius: 10px;
}
#display {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 18px;
}
.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
button {
  padding: 10px;
  font-size: 16px;
  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 = result.toString();
  } catch (error) {
    document.getElementById('display').value = 'Error';
    currentInput = '';
  }
}

增强功能实现

添加键盘支持：

document.addEventListener('keydown', function(event) {
  const key = event.key;
  const validKeys = ['0','1','2','3','4','5','6','7','8','9','+','-','*','/','.','Enter','Escape'];

  if (validKeys.includes(key)) {
    event.preventDefault();
    if (key === 'Enter') calculate();
    else if (key === 'Escape') clearDisplay();
    else appendToDisplay(key);
  }
});

添加历史记录功能：

const calculationHistory = [];

function calculate() {
  try {
    const result = eval(currentInput);
    calculationHistory.push(`${currentInput} = ${result}`);
    document.getElementById('display').value = result;
    currentInput = result.toString();
  } catch (error) {
    document.getElementById('display').value = 'Error';
    currentInput = '';
  }
}

安全改进

替换eval()方法：

function calculate() {
  try {
    const tokens = currentInput.match(/(\d+\.?\d*)|([+\-*/])/g);
    let result = parseFloat(tokens[0]);

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

      switch (operator) {
        case '+': result += operand; break;
        case '-': result -= operand; break;
        case '*': result *= operand; break;
        case '/': result /= operand; break;
      }
    }

    document.getElementById('display').value = result;
    currentInput = result.toString();
  } catch (error) {
    document.getElementById('display').value = 'Error';
    currentInput = '';
  }
}

高级功能扩展

实现科学计算器功能：

function scientificFunction(func) {
  try {
    const value = parseFloat(currentInput);
    let result;

    switch(func) {
      case 'sqrt': result = Math.sqrt(value); break;
      case 'sin': result = Math.sin(value); break;
      case 'cos': result = Math.cos(value); break;
      case 'tan': result = Math.tan(value); break;
      case 'log': result = Math.log10(value); break;
      case 'ln': result = Math.log(value); break;
    }

    document.getElementById('display').value = result;
    currentInput = result.toString();
  } catch (error) {
    document.getElementById('display').value = 'Error';
    currentInput = '';
  }
}

添加百分比功能：

function percentage() {
  try {
    const result = parseFloat(currentInput) / 100;
    document.getElementById('display').value = result;
    currentInput = result.toString();
  } catch (error) {
    document.getElementById('display').value = 'Error';
    currentInput = '';
  }
}