代码小白如何分分钟学会使用计算器，核心要点全都在这里了！

2023-10-20 16:03:45

简易计算器：代码小白的编程入门利器

核心内容：打造自己的计算器

在编程的世界里，计算器是一个不可或缺的伙伴，它能帮你轻松应对各种数学运算，从简单的加减到复杂的函数计算。对于初学编程的小白来说，学会制作一个简易计算器不仅能提升编程技能，还能培养对数学和逻辑思维的兴趣。

1. 按钮点击事件绑定

就像现实中的计算器一样，我们的简易计算器也需要响应按钮的点击。我们可以用 JavaScript 的 addEventListener() 方法为每个按钮绑定一个事件监听器，这样当用户点击按钮时，程序就会执行对应的操作。

// 获取所有按钮元素
const buttons = document.querySelectorAll('.btn');

// 为每个按钮绑定点击事件
buttons.forEach(button => {
  button.addEventListener('click', (event) => {
    // 获取按钮上的数字或符号
    const value = button.textContent;

    // 根据按钮内容执行操作
    switch (value) {
      case '0':
      case '1':
      case '2':
      case '3':
      case '4':
      case '5':
      case '6':
      case '7':
      case '8':
      case '9':
        // 如果是数字，添加到输入框
        document.getElementById('result').value += value;
        break;
      case '+':
      case '-':
      case '*':
      case '/':
        // 如果是符号，存储到变量中
        operation = value;
        break;
      case '=':
        // 如果是等于号，进行计算并显示结果
        const result = calculate(operation);
        document.getElementById('result').value = result;
        break;
    }
  });
});

2. 计算函数的实现

接下来，我们编写计算函数 calculate()，它负责执行加减乘除运算。这个函数需要接收两个参数：操作符 operation 和操作数 operand，然后根据操作符进行相应的计算。

// 计算函数
function calculate(operation, operand) {
  // 获取输入框中的值
  const num1 = parseFloat(document.getElementById('result').value);

  // 根据操作符进行计算
  switch (operation) {
    case '+':
      return num1 + operand;
    case '-':
      return num1 - operand;
    case '*':
      return num1 * operand;
    case '/':
      return num1 / operand;
  }
}