javascript设计简单计算器

JavaScript是一种脚本语言，可以在网页中实现动态效果和交互功能。设计简单计算器是JavaScript的一个常见应用之一。下面是一个简单计算器的设计思路：
1. 定义HTML页面，包括数字和运算符按钮以及显示结果的区域。
2. 使用JavaScript编写事件监听器，当用户点击按钮时，获取按钮上的值，并根据不同的按钮执行不同的操作。
3. 根据用户的操作，计算出结果并显示在结果区域。

下面是一个简单计算器的JavaScript代码示例：

// 获取数字和运算符按钮
var numBtns = document.getElementsByClassName("num");
var opBtns = document.getElementsByClassName("op");

// 获取结果显示区域
var result = document.getElementById("result");

// 定义变量存储计算结果和当前操作符
var num1 = 0;
var num2 = 0;
var operator = "";

// 给数字和运算符按钮添加事件监听器
for (var i = 0; i < numBtns.length; i++) {
  numBtns[i].addEventListener("click", function() {
    // 将按钮上的数字添加到当前操作数中
    if (operator === "") {
      num1 = num1 * 10 + parseInt(this.value);
      result.innerHTML = num1;
    } else {
      num2 = num2 * 10 + parseInt(this.value);
      result.innerHTML = num2;
    }
  });
}

for (var i = 0; i < opBtns.length; i++) {
  opBtns[i].addEventListener("click", function() {
    // 根据不同的操作符执行不同的计算
    switch (this.value) {
      case "+":
        operator = "+";
        break;
      case "-":
        operator = "-";
        break;
      case "*":
        operator = "*";
        break;
      case "/":
        operator = "/";
        break;
      case "=":
        // 计算结果并显示
        switch (operator) {
          case "+":
            result.innerHTML = num1 + num2;
            break;
          case "-":
            result.innerHTML = num1 - num2;
            break;
          case "*":
            result.innerHTML = num1 * num2;
            break;
          case "/":
            result.innerHTML = num1 / num2;
            break;
        }
        // 重置操作数和操作符
        num1 = result.innerHTML;
        num2 = 0;
        operator = "";
        break;
      case "C":
        // 清空结果和操作数
        num1 = 0;
        num2 = 0;
        operator = "";
        result.innerHTML = "";
        break;
    }
  });
}