JavaScript 的魅力：构建你的简易计算器

2023-10-22 05:15:10

JavaScript，一种令网络世界熠熠生辉的语言，拥有无与伦比的魅力，使我们能够超越界限，构建出令人惊叹的交互式体验。它的用途广泛，从动态网页到令人着迷的游戏，无处不在。今天，我们将踏上一次 JavaScript 之旅，亲自打造一个简易计算器，领略其强大的功能。

代码之旅

准备好迎接代码的挑战了吗？让我们从框架开始：

<body>
  <h1>JavaScript 计算器</h1>
  <input type="number" id="num1" placeholder="第一个数字">
  <input type="number" id="num2" placeholder="第二个数字">
  <select id="operator">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <button type="button" id="calculate">计算</button>
  <p id="result"></p>
</body>

现在，让我们深入 JavaScript 的世界：

const num1 = document.getElementById('num1');
const num2 = document.getElementById('num2');
const operator = document.getElementById('operator');
const result = document.getElementById('result');

const calculate = () => {
  const n1 = parseFloat(num1.value);
  const n2 = parseFloat(num2.value);
  const op = operator.value;

  let res;
  switch (op) {
    case '+':
      res = n1 + n2;
      break;
    case '-':
      res = n1 - n2;
      break;
    case '*':
      res = n1 * n2;
      break;
    case '/':
      if (n2 === 0) {
        alert("除数不能为零！");
        return;
      }
      res = n1 / n2;
      break;
  }

  result.innerHTML = `结果：${res}`;
};

document.getElementById('calculate').addEventListener('click', calculate);