js实现计算器

基础计算器实现

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

创建HTML结构：

<div class="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;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}

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

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

button {
  padding: 10px;
  font-size: 16px;
}

JavaScript逻辑实现：

let display = document.getElementById('display');

function appendToDisplay(value) {
  display.value += value;
}

function clearDisplay() {
  display.value = '';
}

function calculate() {
  try {
    display.value = eval(display.value);
  } catch (error) {
    display.value = 'Error';
  }
}

高级计算器功能扩展

对于更复杂的计算器，可以添加科学计算功能：

function calculate() {
  try {
    let expression = display.value
      .replace(/sin/g, 'Math.sin')
      .replace(/cos/g, 'Math.cos')
      .replace(/tan/g, 'Math.tan')
      .replace(/sqrt/g, 'Math.sqrt')
      .replace(/log/g, 'Math.log10')
      .replace(/ln/g, 'Math.log')
      .replace(/\^/g, '');

    display.value = eval(expression);
  } catch (error) {
    display.value = 'Error';
  }
}

添加更多操作按钮到HTML：

<button onclick="appendToDisplay('sin(')">sin</button>
<button onclick="appendToDisplay('cos(')">cos</button>
<button onclick="appendToDisplay('tan(')">tan</button>
<button onclick="appendToDisplay('sqrt(')">√</button>
<button onclick="appendToDisplay('^')">^</button>
<button onclick="appendToDisplay('(')">(</button>
<button onclick="appendToDisplay(')')">)</button>

安全改进方案

使用eval存在安全风险，可以改用解析器实现：

function calculate() {
  try {
    display.value = parseExpression(display.value);
  } catch (error) {
    display.value = 'Error';
  }
}

function parseExpression(expr) {
  // 实现自定义表达式解析逻辑
  // 这里简化处理，实际应实现完整的语法解析
  return Function('"use strict";return (' + expr + ')')();
}

响应式设计增强

通过CSS媒体查询使计算器适配不同设备：

@media (max-width: 400px) {
  .calculator {
    width: 90%;
  }

  button {
    padding: 15px;
    font-size: 18px;
  }
}

键盘事件支持

添加键盘输入支持：

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

这些实现方案提供了从基础到高级的计算器功能，可以根据需求进行组合或扩展。