点击按钮触发的时分秒倒计时器开发求助（附现有代码）

Hey there! Let's transform that simple 5-second timer into a fully functional hours-minutes-seconds countdown. Here's a complete, easy-to-customize solution that handles all the time rollover logic and adds useful features like a reset button:

HTML Code #

<div class="column" style="margin-right: 20px">
  <!-- Countdown display (formatted as HH:MM:SS) -->
  <div id="countdown" style="font-size: 2rem; margin-bottom: 10px;">00:00:05</div>
  <button class="start" onclick="startCountdown();">Start</button>
  <button class="reset" onclick="resetCountdown();" style="margin-left: 10px;">Reset</button>
</div>

JavaScript Code #

let countdownTimer;
// Set your initial countdown time here (adjust hours/minutes/seconds as needed)
let timeLeft = {
  hours: 0,
  minutes: 0,
  seconds: 5
};

// Update the countdown display with properly formatted 2-digit values
function updateDisplay() {
  const formattedHours = String(timeLeft.hours).padStart(2, '0');
  const formattedMinutes = String(timeLeft.minutes).padStart(2, '0');
  const formattedSeconds = String(timeLeft.seconds).padStart(2, '0');
  
  document.getElementById('countdown').textContent = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
}

function startCountdown() {
  // Clear any existing timer to avoid multiple overlapping countdowns
  if (countdownTimer) clearInterval(countdownTimer);
  
  countdownTimer = setInterval(() => {
    // Decrement seconds first
    timeLeft.seconds--;
    
    // Handle second-to-minute rollover
    if (timeLeft.seconds < 0) {
      timeLeft.seconds = 59;
      timeLeft.minutes--;
      
      // Handle minute-to-hour rollover
      if (timeLeft.minutes < 0) {
        timeLeft.minutes = 59;
        timeLeft.hours--;
        
        // Stop timer when all values hit 0
        if (timeLeft.hours < 0) {
          clearInterval(countdownTimer);
          alert('Countdown completed! 🎉');
          return;
        }
      }
    }
    
    updateDisplay();
  }, 1000);
}

// Reset the countdown to its initial time
function resetCountdown() {
  timeLeft = {
    hours: 0,
    minutes: 0,
    seconds: 5
  };
  clearInterval(countdownTimer);
  updateDisplay();
}

// Initialize the display when the page loads
window.onload = updateDisplay;

Key Features & Explanations #

• Structured Time Tracking: Uses an object to separately manage hours, minutes, and seconds, making it straightforward to handle rollover logic (e.g., when seconds hit 0, subtract 1 from minutes and reset seconds to 59).
• Clean Formatted Display: Uses padStart(2, '0') to ensure each time unit shows as two digits (so 5 seconds becomes "05" instead of "5" for a polished look).
• Prevent Multiple Timers: Clears any existing interval before starting a new one, so clicking "Start" multiple times won't speed up the countdown.
• Reset Functionality: Added a reset button to restart the countdown whenever needed.
• Completion Alert: Triggers a notification when the countdown reaches 00:00:00.

To set a different initial countdown duration, just update the values in the timeLeft object (e.g., hours: 1, minutes: 30, seconds: 0 for a 1.5-hour timer).

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