嘿，我来帮你把这个倒计时器改成每12小时循环的版本！你的原代码只处理24小时到次日0点的情况，我们需要调整逻辑，让它在GMT+10时区下，始终倒计时到最近的12点（凌晨0点或中午12点），循环往复。

核心思路 #

1. 先处理时区问题：必须确保我们计算的是GMT+10的时间，而不是用户的本地时区时间，避免倒计时出错。
2. 判断下一个目标时间：如果当前GMT+10时间的小时数小于12，就倒计时到当天中午12点；如果大于等于12，就倒计时到次日凌晨0点。
3. 实时更新倒计时：每秒计算当前时间与目标时间的差值，格式化后展示。

完整代码实现 #

// 获取GMT+10时区下的下一个目标时间（0点或12点）
function getNextTargetTime() {
  const now = new Date();
  // 将UTC时间转换为GMT+10时间
  const gmt10Now = new Date(now);
  gmt10Now.setHours(gmt10Now.getUTCHours() + 10);
  
  const target = new Date(gmt10Now);
  if (gmt10Now.getHours() < 12) {
    // 当前时间早于12点，目标为当天中午12点
    target.setHours(12, 0, 0, 0);
  } else {
    // 当前时间晚于/等于12点，目标为次日凌晨0点
    target.setHours(24, 0, 0, 0); // setHours(24)会自动转为次日0点
  }
  
  return target.getTime();
}

// 更新倒计时显示
function updateCountdown() {
  const now = new Date().getTime();
  const targetTime = getNextTargetTime();
  
  // 处理刚好到达目标时间的边界情况
  let timeDiff = targetTime - now;
  if (timeDiff < 0) {
    return updateCountdown();
  }
  
  // 计算时分秒
  const hours = Math.floor(timeDiff / (1000 * 60 * 60));
  timeDiff -= hours * 1000 * 60 * 60;
  
  const minutes = Math.floor(timeDiff / (1000 * 60));
  timeDiff -= minutes * 1000 * 60;
  
  const seconds = Math.floor(timeDiff / 1000);
  
  // 格式化数字，补前导零
  const formattedHours = hours.toString().padStart(2, '0');
  const formattedMins = minutes.toString().padStart(2, '0');
  const formattedSecs = seconds.toString().padStart(2, '0');
  
  // 替换成你的页面元素选择器
  $('#countdown').text(`${formattedHours}:${formattedMins}:${formattedSecs}`);
}

// 页面加载后初始化倒计时
$(document).ready(function() {
  // 先执行一次避免延迟
  updateCountdown();
  // 每秒更新一次
  setInterval(updateCountdown, 1000);
});

关键细节说明 #

• 时区处理：通过gmt10Now.setHours(gmt10Now.getUTCHours() + 10)，我们把UTC时间加上10小时，得到准确的GMT+10时间，不受用户本地时区影响。
• 目标时间切换：setHours(24)是一个小技巧，它会自动把日期转到次日，同时小时数重置为0，完美实现“次日凌晨0点”的需求。
• 边界处理：如果刚好到达目标时间，timeDiff会变成负数，这时候递归调用updateCountdown()，自动切换到下一个12点目标。
• 格式化：用padStart(2, '0')确保时分秒都是两位数，比如把“5”变成“05”，显示更美观。

替换说明 #

如果你的页面没有用jQuery，只需要把$('#countdown').text(...)换成原生JS写法：

document.getElementById('countdown').textContent = `${formattedHours}:${formattedMins}:${formattedSecs}`;

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