如何改造现有倒计时实现自定义分钟数输入启动功能？

Hey there! Let's modify your existing countdown code to let users input their desired minutes and start the timer with a button. We'll also tidy up a few edge cases (like stopping existing timers before starting new ones) to make it more robust.

Full Working Code #

<div class="clock" id="model3">
  <div id="countdown">
    <span id="timer"></span><span id="millis"></span>
  </div>
  <!-- New user controls -->
  <div style="margin-top: 1rem;">
    <input 
      id="minutesInput" 
      type="number" 
      placeholder="Enter minutes" 
      min="1" 
      step="1"
    />
    <button onclick="startUserCountdown()" style="margin-left: 0.5rem;">Start Countdown</button>
  </div>
</div>

<script>
  // Track our intervals so we can clear them later
  let intervalSeconds = null;
  let intervalMillis = null;
  let countdownEnded = false;

  // Handle user input and trigger the timer
  function startUserCountdown() {
    const input = document.getElementById('minutesInput');
    const minutes = parseInt(input.value.trim());

    // Validate the input first
    if (isNaN(minutes) || minutes < 1) {
      alert('Please enter a valid positive number for minutes!');
      input.focus();
      return;
    }

    // Convert minutes to seconds and start the countdown
    const totalSeconds = minutes * 60;
    stopCountdown(); // Stop any running timer before starting a new one
    start(totalSeconds);
  }

  function start(inputTime) {
    countdownEnded = false;
    const startTime = Date.now();

    // Update the main timer every second
    intervalSeconds = setInterval(() => {
      const elapsedSeconds = Math.floor((Date.now() - startTime) / 1000);
      const remainingSeconds = inputTime - elapsedSeconds;

      if (remainingSeconds <= 0) {
        stopCountdown();
      } else {
        updateDisplay(remainingSeconds);
      }
    }, 1000);

    // Update milliseconds every 10ms
    let counterMillis = 99;
    intervalMillis = setInterval(() => {
      if (countdownEnded) {
        clearInterval(intervalMillis);
        return;
      }

      const millis = counterMillis < 10 ? `0${counterMillis}` : counterMillis;
      document.getElementById('millis').textContent = millis;
      counterMillis = counterMillis === 0 ? 99 : counterMillis - 1;
    }, 10);
  }

  function stopCountdown() {
    countdownEnded = true;
    // Clear both intervals to prevent leftover timers
    clearInterval(intervalSeconds);
    clearInterval(intervalMillis);

    const timerElement = document.getElementById('timer');
    timerElement.textContent = 'Countdown done';
    document.getElementById('millis').textContent = '';
  }

  function updateDisplay(remainingSeconds) {
    const minutes = Math.floor(remainingSeconds / 60);
    const seconds = remainingSeconds % 60;

    // Format numbers to always show two digits
    const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
    const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds;

    document.getElementById('timer').textContent = `${formattedMinutes}:${formattedSeconds}:`;
  }
</script>

What We Changed & Why #

• Added User Controls: We replaced the hardcoded start(3600) call with a number input (restricted to positive values) and a start button, letting users trigger the countdown manually.
• Input Validation: The startUserCountdown function checks if the input is a valid number, alerts the user if not, and focuses back on the input for quick correction.
• Proper Timer Cleanup: We now clear both the second and millisecond intervals when stopping the countdown. This prevents multiple timers from running if the user clicks "Start" again before the first one finishes.
• Scoped Variables: Variables like intervalSeconds are declared at the top level so they're accessible across functions for cleanup.
• Simplified Logic: We streamlined the updateDisplay function to directly use remaining seconds, making the code easier to read and debug.
• Fixed Millisecond Counter: The millisecond timer now stops correctly when the countdown ends and resets properly each second.

How to Use It #

1. Type a positive number of minutes into the input field.
2. Click "Start Countdown" to begin the timer.
3. The timer will show minutes, seconds, and milliseconds, and display "Countdown done" when finished.
4. If you start a new countdown while one is running, the old timer will automatically stop before the new one starts.

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