js计算器的实现

实现基础结构

HTML部分需要创建计算器的基本框架，包含显示区域和按钮。使用<div>容器包裹整个计算器，内部设置一个显示屏和多个按钮。

<div class="calculator">
  <input type="text" id="display" readonly>
  <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="calculate()">=</button>
    <button onclick="clearDisplay()">C</button>
  </div>
</div>

添加CSS样式

通过CSS美化计算器外观，设置按钮布局和显示区域样式。使用Flexbox或Grid布局实现按钮排列。

.calculator {
  width: 300px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
}
#display {
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
  text-align: right;
  font-size: 24px;
}
.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
button {
  height: 50px;
  font-size: 18px;
  border-radius: 5px;
}

编写核心JavaScript功能

实现三个主要函数：数字/运算符输入、计算结果和清除显示。使用eval()函数执行计算，但需注意安全性问题。

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 backspace() {
  display.value = display.value.slice(0, -1);
}

function percentage() {
  display.value = eval(display.value) / 100;
}

错误处理与验证

添加输入验证防止非法表达式。检查最后一个字符是否为运算符，避免连续运算符。

function appendToDisplay(value) {
  const lastChar = display.value.slice(-1);
  if (['+', '-', '*', '/'].includes(lastChar) && 
      ['+', '-', '*', '/'].includes(value)) {
    return;
  }
  display.value += value;
}

键盘事件支持

添加键盘输入支持，监听keydown事件并映射到相应按钮功能。

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 === 'Backspace') {
    backspace();
  } else if (event.key === 'Escape') {
    clearDisplay();
  }
});

替代eval的方案

为提升安全性，可改用Function构造函数或数学表达式解析库替代eval。

function calculate() {
  try {
    display.value = new Function('return ' + display.value)();
  } catch {
    display.value = 'Error';
  }
}