求助：如何用原生JavaScript实现带用户输入的倒计时器

没问题，我帮你搞定这个原生JS的倒计时器，完全不用jQuery，直接基于你给的HTML结构来实现。下面是完整的代码和关键逻辑说明：

完整实现代码 #

首先是你提供的HTML结构（我稍微调整了格式，更易读）：

<div class='countdown'>
  <div class='times'>
    <span class='inputData'>Hours: </span>
    <input class='hours' type="number" min='0' />
  </div>
  <div class='times'>
    <span class='inputData'>Minutes: </span>
    <input class='mins' type="number" min='0' max='59' />
  </div>
  <div class='times'>
    <span class='inputData'>Seconds: </span>
    <input class='secs' type="number" min='0' max='59' />
  </div>
  <button class='countBtn'>START</button>
  <div class='count'>
    <span>00</span>
    <span>00</span>
    <span>00</span>
  </div>
</div>

然后是核心的JavaScript代码：

// 获取页面元素
const hoursInput = document.querySelector('.hours');
const minsInput = document.querySelector('.mins');
const secsInput = document.querySelector('.secs');
const startBtn = document.querySelector('.countBtn');
const displaySpans = document.querySelectorAll('.count span');

let countdownTimer = null; // 存储定时器ID，方便后续清除

// 给按钮绑定点击事件
startBtn.addEventListener('click', startCountdown);

function startCountdown() {
  // 1. 处理输入值：转成数字，空输入默认设为0
  const hours = parseInt(hoursInput.value) || 0;
  const mins = parseInt(minsInput.value) || 0;
  const secs = parseInt(secsInput.value) || 0;

  // 2. 验证输入合法性
  if (hours < 0 || mins < 0 || secs < 0 || mins > 59 || secs > 59) {
    alert('请输入合法数值：小时≥0，分钟/秒需在0-59之间');
    return;
  }
  if (hours === 0 && mins === 0 && secs === 0) {
    alert('请设置大于0的倒计时时间哦');
    return;
  }

  // 3. 计算总倒计时秒数，统一处理更方便
  let totalSeconds = hours * 3600 + mins * 60 + secs;

  // 4. 禁用按钮，防止重复点击触发多个定时器
  startBtn.disabled = true;
  startBtn.textContent = '倒计时中...';

  // 5. 启动倒计时定时器
  countdownTimer = setInterval(() => {
    if (totalSeconds <= 0) {
      // 倒计时结束：清除定时器，恢复按钮状态，提示用户
      clearInterval(countdownTimer);
      startBtn.disabled = false;
      startBtn.textContent = 'START';
      alert('倒计时结束！');
      return;
    }

    // 6. 把总秒数转换为时分秒格式
    const remainingHours = Math.floor(totalSeconds / 3600);
    const remainingMins = Math.floor((totalSeconds % 3600) / 60);
    const remainingSecs = totalSeconds % 60;

    // 7. 格式化显示：不足两位补0，保证视觉统一
    displaySpans[0].textContent = String(remainingHours).padStart(2, '0');
    displaySpans[1].textContent = String(remainingMins).padStart(2, '0');
    displaySpans[2].textContent = String(remainingSecs).padStart(2, '0');

    // 总秒数减1，进入下一秒
    totalSeconds--;
  }, 1000);
}

关键逻辑说明 #

• 输入验证：点击按钮后先检查输入是否合法，避免无效的倒计时设置，同时处理空输入的情况（默认转为0）。
• 总秒数计算：把小时、分钟都转换成秒，用统一的数值处理倒计时逻辑，减少复杂度。
• 定时器控制：使用setInterval每秒执行一次倒计时更新，结束时用clearInterval清除定时器，防止内存泄漏。
• 显示格式化：用padStart(2, '0')确保时分秒都以两位数字显示，比如1秒显示为01，保持界面美观。
• 按钮状态管理：倒计时过程中禁用按钮，防止用户重复点击触发多个定时器，结束后恢复按钮可点击状态。

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