Javascript制作计算器

JavaScript制作计算器是一个常见的前端开发练习，它通常涉及到HTML、CSS和JavaScript的结合运用。以下是创建简单计算器的基本步骤：

1. **布局设计**：
使用HTML构建基本的界面，包括数字按钮、运算符按钮（如加减乘除、等于等）、以及可能的一个显示区域（通常是`<input>`元素用于实时显示计算结果）。

<div id="calculator">
  <input type="text" id="display" disabled>
  <!-- 数字0-9 -->
  <button>1</button>
  <button>2</button>
  <!-- ... -->
  <!-- 运算符+ - * / = -->
  <button>=</button>
</div>

2. **事件处理**：
通过JavaScript给每个按钮添加点击事件处理器，当用户点击数字按钮时更新显示区，点击运算符按钮则执行相应的计算操作。

const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
  button.addEventListener('click', event => {
    const display = document.getElementById('display');
    // 按钮值可能是数字或运算符，这里只是示例
    if (button.textContent >= '0' && button.textContent <= '9') {
      display.value += button.textContent;
    } else if (button.textContent === '=') {
      // 执行计算
      let result = eval(display.value);
      display.value = result;
    }
  });
});

注意：`eval()`函数有安全风险，不应该在实际生产环境中使用，因为它是动态执行字符串作为代码。在这里仅用于教学演示。

3. **错误处理**：
考虑到用户输入可能存在无效字符，可以添加额外的检查来避免异常。

// 添加错误处理，例如检查是否连续输入运算符，或者检查是否只有非法字符
if (/* 输入错误条件 */) {
  alert('请输入有效的数学表达式！');
}