如何让JavaScript倒计时器每10分钟自动重启？附修改代码片段

嘿，我看了你基于那段倒计时代码做的修改，现在要实现每10分钟自动重启的功能其实很简单，核心就是让倒计时结束后自动计算下一个10分钟的结束时间，再重新初始化时钟就行。下面是具体的修改步骤和完整代码示例：

首先，保留你已经写好的getTimeRemaining函数，它是计算剩余时间的核心：

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  return {
    'total': t,
    'minutes': minutes,
    'seconds': seconds
  };
}

接下来新增一个函数，用来计算下一个10分钟的结束时间，这样每次倒计时结束后都能拿到新的目标时间：

function getNextTenMinuteEndtime() {
  const now = new Date();
  // 当前时间直接加上10分钟的毫秒数（10*60*1000）
  return new Date(now.getTime() + 10 * 60 * 1000);
}

然后修改initializeClock函数，让它在倒计时结束时自动触发重启逻辑：

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);
    // 给数字补前导零，让显示更规整（比如把5变成05，可选）
    minutesSpan.innerHTML = String(t.minutes).padStart(2, '0');
    secondsSpan.innerHTML = String(t.seconds).padStart(2, '0');

    if (t.total <= 0) {
      // 先清除当前的定时器
      clearInterval(timeinterval);
      // 获取下一个10分钟的结束时间，重新启动倒计时
      const nextEndtime = getNextTenMinuteEndtime();
      initializeClock(id, nextEndtime);
    }
  }

  // 立即执行一次更新，避免页面加载后有1秒延迟
  updateClock();
  // 每秒更新一次倒计时状态
  var timeinterval = setInterval(updateClock, 1000);
}

最后在页面加载时启动第一个10分钟倒计时：

// 页面加载完成后初始化倒计时
window.onload = function() {
  const initialEndtime = getNextTenMinuteEndtime();
  initializeClock('clockdiv', initialEndtime);
};

这样修改后，你的倒计时器就会每10分钟自动重启一次啦～ 要是你不需要补前导零的显示效果，直接删掉padStart(2, '0')这部分代码就行。

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