JavaScript倒计时点击重置按钮失效，需实现重置后从30分钟重新计时

原代码核心问题点 #

• 初始计时值设置错误：需求为30分钟倒计时，原代码将总秒数设为30，实际仅能实现30秒倒计时
• DOM结构不合理：重置按钮的<a>标签被放在id="countdown"的容器内部，JS每次更新倒计时文本时会直接覆盖容器内所有内容，导致按钮被冲掉消失
• 重置按钮逻辑失效：原按钮点击直接单次调用secondPassed()，没有清除旧定时器、重置计时值，不仅无法触发重置，还会造成定时器叠加、计时速度异常
• 时间计算逻辑硬编码错误：分钟计算代码Math.round((seconds - 30) / 60)写死了减30的偏移量，随着秒数递减，计算出的分钟值完全不符合实际剩余时间
• 定时器使用不规范：setInterval使用字符串传参的写法容易引发作用域异常，且重置时无法精准清除原有定时器

修复后可直接运行的代码 #

JavaScript 部分 #

// 定义30分钟对应的总秒数常量
const TOTAL_SECONDS = 30 * 60;
// 全局维护当前剩余秒数、定时器引用
let remainingSeconds = TOTAL_SECONDS;
let countdownTimer = null;

/**
 * 更新倒计时显示
 */
function updateCountdown() {
  // 计算剩余分钟、剩余秒数
  const mins = Math.floor(remainingSeconds / 60);
  const secs = remainingSeconds % 60;
  // 不足10秒时补前导零
  const formatSecs = secs < 10 ? '0' + secs : secs;
  // 更新页面倒计时文本
  document.getElementById('countdown').innerText = `${mins}:${formatSecs}`;

  // 计时结束分支
  if (remainingSeconds === 0) {
    clearInterval(countdownTimer);
    document.getElementById('countdown').innerText = 'You are Ready!';
    return;
  }
  remainingSeconds--;
}

/**
 * 启动/重置倒计时流程
 */
function startCountdown() {
  // 启动前先清除旧定时器，避免多实例叠加
  if (countdownTimer) clearInterval(countdownTimer);
  // 重置剩余秒数为总时长
  remainingSeconds = TOTAL_SECONDS;
  // 立即刷新一次显示，无需等待1秒才能看到初始值
  updateCountdown();
  // 启动新的定时任务
  countdownTimer = setInterval(updateCountdown, 1000);
}

// 页面加载完成后自动启动第一次倒计时
startCountdown();

HTML 部分 #

<span id="countdown" class="timer"></span>
<a href="javascript:void(0)" onclick="startCountdown()">Reset time（重置时间）</a>

功能匹配说明 #

• 点击重置按钮时，会先清除所有正在运行的旧定时器，无论之前倒计时剩余多少时间、是否已经结束弹出「You are Ready!」，都会直接将剩余秒数重置为30分钟对应的1800秒
• 新计时流程启动后，会以分钟:秒数的格式化形式实时显示剩余时间，倒计时到0时自动停止定时任务，显示「You are Ready!」提示
• 不会出现多定时器叠加导致的计时速度异常，每次点击重置都会生成独立、干净的新计时流程

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