计算器代码需求：先输数字再输单一运算符及AC转CE功能实现

Alright, let's build out your calculator input logic to meet those three requirements, using your existing code as a starting point. I'll break this down with clear state management and event handlers to enforce each rule.

1. Core State Management #

First, we need to track a few key pieces of state to control the input flow:

• currentInput: Stores the string of numbers and operators currently being entered
• hasOperator: A boolean flag to check if we've already added an operator (prevents multiple operators in a row)
• displayElement: Reference to the calculator's display area (I'll assume it has an ID of display—adjust if yours is different)

2. Implementing Input Rules #

Rule 1: Block Operator Input Before Any Numbers #

We'll make sure that if the user tries to click an operator before entering any digits, nothing happens.

Rule 2: Only Allow One Operator at a Time #

Using the hasOperator flag, we'll block additional operator clicks until a new number is entered or the calculation is done.

Rule 3: AC/CE Toggle Logic #

Your existing code starts to handle the AC→CE switch, but we'll expand it to actually reset state appropriately (AC clears everything, CE clears the current input segment).

Full Working Code #

First, the JavaScript (place this in a <script> tag or external file):

// Get DOM elements
const display = document.getElementById("display");
const acCeBtn = document.getElementById("AC");

// State variables
let currentInput = "";
let hasOperator = false;

// Update display with current input (show 0 if empty)
function updateDisplay() {
  display.textContent = currentInput || "0";
}

// Handle number/digit clicks
function handleNumberClick(num) {
  currentInput += num.toString();
  updateDisplay();
}

// Handle operator clicks (enforce rules 1 and 2)
function handleOperatorClick(op) {
  // Rule 1: No operator if no numbers entered yet
  if (currentInput === "") return;
  
  // Rule 2: Only one operator allowed at a time
  if (hasOperator) return;
  
  // Add operator to input and update state
  currentInput += ` ${op} `; // Add spaces for readability
  hasOperator = true;
  updateDisplay();
}

// Expand AC/CE functionality (your existing code extended)
acCeBtn.onclick = function() {
  if (acCeBtn.textContent === "AC") {
    // AC: Reset all state to initial
    currentInput = "";
    hasOperator = false;
    acCeBtn.textContent = "CE";
  } else {
    // CE: Clear current input segment
    if (hasOperator) {
      // If we have an operator, keep the first number and operator (clear the second number)
      currentInput = currentInput.split(" ").slice(0, 2).join(" ");
    } else {
      // No operator yet, clear everything
      currentInput = "";
    }
    acCeBtn.textContent = "AC";
  }
  updateDisplay();
};

// Calculate result (optional but essential for a full calculator)
function calculate() {
  if (!hasOperator || currentInput === "") return;
  
  try {
    // Note: eval() is used here for simplicity—for production, use a safer expression parser
    const result = eval(currentInput);
    currentInput = result.toString();
    hasOperator = false;
    acCeBtn.textContent = "AC";
    updateDisplay();
  } catch (err) {
    display.textContent = "Error";
    currentInput = "";
    hasOperator = false;
    acCeBtn.textContent = "AC";
  }
}

Then the HTML (integrated with your existing <center><form> structure):

<center>
  <form>
    <!-- Display area -->
    <div id="display" style="width: 200px; height: 40px; border: 1px solid #ccc; text-align: right; padding: 8px; margin-bottom: 10px;">0</div>
    
    <!-- Number and operator buttons -->
    <button type="button" onclick="handleNumberClick(7)">7</button>
    <button type="button" onclick="handleNumberClick(8)">8</button>
    <button type="button" onclick="handleNumberClick(9)">9</button>
    <button type="button" onclick="handleOperatorClick('/')">/</button>
    <br><br>
    <button type="button" onclick="handleNumberClick(4)">4</button>
    <button type="button" onclick="handleNumberClick(5)">5</button>
    <button type="button" onclick="handleNumberClick(6)">6</button>
    <button type="button" onclick="handleOperatorClick('*')">*</button>
    <br><br>
    <button type="button" onclick="handleNumberClick(1)">1</button>
    <button type="button" onclick="handleNumberClick(2)">2</button>
    <button type="button" onclick="handleNumberClick(3)">3</button>
    <button type="button" onclick="handleOperatorClick('-')">-</button>
    <br><br>
    <button type="button" onclick="handleNumberClick(0)">0</button>
    <button type="button" onclick="handleNumberClick('.')">.</button>
    <button type="button" onclick="handleOperatorClick('%')">%</button>
    <button type="button" onclick="handleOperatorClick('+')">+</button>
    <br><br>
    <!-- AC/CE button (your original element) -->
    <button type="button" id="AC">AC</button>
    <button type="button" onclick="calculate()">=</button>
  </form>
</center>

Key Notes #

• The updateDisplay function ensures the screen always shows the current input (or 0 if nothing's entered).
• Operator clicks are blocked entirely if no numbers have been entered (rule 1) and if an operator is already present (rule 2).
• The AC/CE toggle works as expected: AC resets everything, CE clears only the most recent input segment (so if you've entered 5 + 3, CE will clear the 3 but leave 5 + ).
• The calculate function handles evaluating the input—keep in mind eval() is convenient for demos but should be replaced with a safer parser in production to avoid security risks.

内容的提问来源于stack exchange，提问作者Bhawesh Bhaskar