求助：如何用JavaScript的setInterval实现格式为(00:20:00)的20分钟倒计时？

It looks like your current approach of tracking minutes and seconds separately can lead to bugs when handling transitions (like when seconds hit 0 and you need to decrement minutes). Let's simplify this by tracking the total number of seconds remaining—this makes the logic much cleaner and avoids off-by-one errors.

Here's a complete, working solution that starts at 00:20:00 and counts down to 00:00:00:

HTML #

<body onload="startCountdown()">
  <div id="countdown"></div>
</body>

JavaScript #

function startCountdown() {
  // Total seconds for 20 minutes: 20 * 60 = 1200
  let totalSeconds = 20 * 60;
  const countdownDisplay = document.getElementById('countdown');

  // This function updates the display and decrements the timer
  function updateTimer() {
    // Calculate hours, minutes, and remaining seconds from totalSeconds
    const hours = Math.floor(totalSeconds / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = totalSeconds % 60;

    // Format each value to always show two digits (e.g., 5 becomes "05")
    const formattedHours = hours.toString().padStart(2, '0');
    const formattedMinutes = minutes.toString().padStart(2, '0');
    const formattedSeconds = seconds.toString().padStart(2, '0');

    // Update the display with the formatted time
    countdownDisplay.textContent = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;

    // Decrement the total seconds
    totalSeconds--;

    // Stop the countdown when we reach -1 (since we decrement after updating)
    if (totalSeconds < 0) {
      clearInterval(timerInterval);
      // Ensure the final display is exactly 00:00:00
      countdownDisplay.textContent = '00:00:00';
    }
  }

  // Run the update once immediately to show the starting time right away
  updateTimer();
  // Set the interval to update every 1000ms (1 second)
  const timerInterval = setInterval(updateTimer, 1000);
}

Key Improvements Over Your Original Code: #

• Track total seconds: Instead of managing separate minute and second variables, we use a single totalSeconds variable. This eliminates the need to handle edge cases like when seconds hit 0 and you have to decrement minutes.
• Two-digit formatting: The padStart(2, '0') method ensures that single-digit values (like 5 seconds) are displayed as 05, matching your desired 00:20:00 format.
• Immediate initial update: We call updateTimer() once before starting the interval so the starting time appears right away, not after a 1-second delay.
• Clean stop condition: When totalSeconds drops below 0, we clear the interval and explicitly set the display to 00:00:00 to avoid any negative values.

If You Want Separate Spans (Like Your Original Code): #

If you prefer to keep separate elements for hours, minutes, and seconds, modify the HTML and update the updateTimer function like this:

HTML

<body onload="startCountdown()">
  <span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span>
</body>

Updated JavaScript (inside updateTimer):

// Update each span individually
document.getElementById('hours').textContent = formattedHours;
document.getElementById('minutes').textContent = formattedMinutes;
document.getElementById('seconds').textContent = formattedSeconds;

This will work just as well and fit your original HTML structure.

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