用html制作简易计算器

这里提供一个使用HTML和JavaScript制作简易计算器的方法：

1. HTML部分（显示屏）：

<div id="calculator">
  <input type="text" id="result" disabled>
</div>

2. JavaScript部分（按钮和功能）：

// 获取计算器元素和结果元素
var calculator = document.getElementById("calculator");
var result = document.getElementById("result");

// 创建按钮元素
var buttons = [
  { value: "C", class: "clear" },
  { value: "7" },
  { value: "8" },
  { value: "9" },  { value: "/", class: "operator" },
  { value: "4" },
  { value: "5" },
  { value: "6" },
  { value: "*", class: "operator" },
  { value: "1" },
  { value: "2" },
  { value: "3" },
  { value: "-", class: "operator" },
  { value: "0" },
  { value: ".", class: "decimal" },
  { value: "=", class: "equal" },
  { value: "+", class: "operator" }
];

// 循环创建按钮
for (var i = 0; i < buttons.length; i++) {
  var button = document.createElement("button");
  button.innerHTML = buttons[i].value;
  button.setAttribute("class", "button");
  if (buttons[i].class) {
    button.classList.add(buttons[i].class);
  }
  calculator.appendChild(button);
}

// 添加按钮点击事件
var operator = null;
var firstNumber = null;
var secondNumber = null;
var decimal = false;

calculator.addEventListener("click", function(event) {
  var target = event.target;
  if (target.classList.contains("button")) {
    var value = target.innerHTML;    switch (value) {
      case "C":
        result.value = "";
        operator = null;
        firstNumber = null;
        secondNumber = null;
        decimal = false;
        break;
      case "+":
      case "-":
      case "*":
      case "/":
        operator = value;
        firstNumber = parseFloat(result.value);
        result.value = "";
        decimal = false;
        break;
      case "=":
        if (operator && firstNumber) {
          secondNumber = parseFloat(result.value);
          switch (operator) {
            case "+":
              result.value = firstNumber + secondNumber;
              break;
            case "-":
              result.value = firstNumber - secondNumber;
              break;
            case "*":
              result.value = firstNumber * secondNumber;
              break;
            case "/":
              result.value = firstNumber / secondNumber;
              break;
          }
          operator = null;
          firstNumber = null;
          secondNumber = null;
          decimal = false;
        }
        break;
      case ".":
        if (!decimal) {
          result.value += ".";
          decimal = true;
        }
        break;
      default:
        result.value += value;
        break;
    }
  }
});