HTML如何制作计时器？倒计时功能怎么实现？

<span>

<div>

<span id="timer">00:00:00</span>
<button id="start">开始</button>
<button id="stop">停止</button>

const timerDisplay = document.getElementById('timer');
const startButton = document.getElementById('start');
const stopButton = document.getElementById('stop');
let seconds = 0;
let intervalId;

function updateTimer() {
  seconds++;
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const remainingSeconds = seconds % 60;

  const formattedTime = `${pad(hours)}:${pad(minutes)}:${pad(remainingSeconds)}`;
  timerDisplay.textContent = formattedTime;
}

function pad(number) {
  return (number < 10 ? '0' : '') + number;
}

startButton.addEventListener('click', () => {
  if (!intervalId) {
    intervalId = setInterval(updateTimer, 1000); // 每秒更新一次
  }
});

stopButton.addEventListener('click', () => {
  clearInterval(intervalId);
  intervalId = null;
});

updateTimer

timerDisplay

pad

<span id="countdown"></span>
<input type="number" id="initialSeconds" value="60">
<button id="startCountdown">开始倒计时</button>

const countdownDisplay = document.getElementById('countdown');
const initialSecondsInput = document.getElementById('initialSeconds');
const startCountdownButton = document.getElementById('startCountdown');
let remainingSeconds;
let countdownIntervalId;

function updateCountdown() {
  remainingSeconds--;

  if (remainingSeconds < 0) {
    clearInterval(countdownIntervalId);
    countdownDisplay.textContent = '时间到！';
    return;
  }

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

  const formattedTime = `${pad(minutes)}:${pad(seconds)}`;
  countdownDisplay.textContent = formattedTime;
}

startCountdownButton.addEventListener('click', () => {
  remainingSeconds = parseInt(initialSecondsInput.value);
  if (isNaN(remainingSeconds) || remainingSeconds <= 0) {
    alert('请输入一个有效的秒数');
    return;
  }

  clearInterval(countdownIntervalId); // 防止多次点击导致多个倒计时同时进行
  updateCountdown(); // 立即更新一次显示，避免延迟
  countdownIntervalId = setInterval(updateCountdown, 1000);
});

seconds