html+JavaScript+css 24点计算器

以下是一个简单的HTML、JavaScript和CSS结合的24点计算器示例：



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>24 Points Calculator</title>
<style>
  body { font-family: Arial, sans-serif; }
  #calculator { text-align: center; padding: 20px; }
  input[type="text"] { width: 50px; }
  button { width: 50px; margin: 5px; }
</style>
</head>
<body>
 
<div id="calculator">
  <input type="text" id="display" disabled>
  <button onclick="clearDisplay()">C</button>
  <button onclick="inputDigit(7)">7</button>
  <button onclick="inputDigit(8)">8</button>
  <button onclick="inputDigit(9)">9</button>
  <button onclick="performOperation('+')">+</button>
  <button onclick="inputDigit(4)">4</button>
  <button onclick="inputDigit(5)">5</button>
  <button onclick="inputDigit(6)">6</button>
  <button onclick="performOperation('-')">-</button>
  <button onclick="inputDigit(1)">1</button>
  <button onclick="inputDigit(2)">2</button>
  <button onclick="inputDigit(3)">3</button>
  <button onclick="performOperation('*')">&times;</button>
  <button onclick="inputDigit(0)">0</button>
  <button onclick="performOperation('/')">&divide;</button>
  <button onclick="calculateResult()">=</button>
</div>
 
<script>
  // 初始显示屏幕
  var display = document.getElementById("display");
  var currentOperation = null;
  var firstOperand = null;
  var waitingForOperand = true;
 
  function clearDisplay() {
    display.value = "";
    waitingForOperand = true;
  }
 
  function inputDigit(digit) {
    var inputValue = display.value;
    if (waitingForOperand) {
      inputValue = "";
      waitingForOperand = false;
    }
    display.value = inputValue + digit;
  }
 
  function performOperation(operation) {
    if (currentOperation != null) {
      calculateResult();
    }
    currentOperation = operation;
    firstOperand = parseFloat(display.value);
    waitingForOperand = true;
  }
 
  function calculateResult() {
    var secondOperand = parseFloat(display.value);
    if (currentOperation != null) {
      switch (currentOperation) {
        case "+":
          display.value = firstOperand + secondOperand;
          break;
        case "-":
          display.value = firstOperand - secondOperand;
          break;
        case "*":
          display.value = firstOperand * secondOperand;
          break;
        case "/":
html+JavaScript+css 24点计算器

评论已关闭

推荐阅读
