动态网页倒计时器重置与优化指南

let tId; // 用于存储 setInterval 的ID，以便后续清除

/**
 * 设置并启动倒计时
 * @param {number} target_date - 目标日期的毫秒时间戳
 */
function setCountDown(target_date) {
  // 确保在启动新倒计时前，清除任何旧的定时器
  if (tId) {
    clearInterval(tId);
  }

  // 定义时间单位变量
  let days, hours, minutes, seconds;

  // 每1秒更新一次倒计时显示
  tId = setInterval(function() {
    const current_date = new Date().getTime(); // 获取当前时间戳
    let seconds_left = (target_date - current_date) / 1000; // 计算剩余秒数

    if (current_date < target_date) {
      // 如果目标日期未到，则进行时间计算
      days = Math.floor(seconds_left / 86400);
      seconds_left %= 86400;

      hours = Math.floor(seconds_left / 3600);
      seconds_left %= 3600;

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

      // 格式化数字，确保两位显示（例如 09 而不是 9）
      days = days < 10 ? "0" + days : days;
      hours = hours < 10 ? "0" + hours : hours;
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
    } else {
      // 目标日期已过，全部显示为00
      days = '00';
      hours = '00';
      minutes = '00';
      seconds = '00';
      clearInterval(tId); // 倒计时结束，清除定时器
    }

    // 更新DOM元素显示
    $(".days .number").html(days);
    $(".hours .number").html(hours);
    $(".minutes .number").html(minutes);
    $(".seconds .number").html(seconds);
  }, 1000); // 每1000毫秒（1秒）执行一次
}

/**
 * 初始化倒计时
 */
const initTime = () => {
  // 初始设置一个目标日期，例如 2023年6月10日 10:00:00
  const initial_target_date = new Date("2023-06-10T10:00:00").getTime();
  setCountDown(initial_target_date);
};

// 当DOM加载完成后执行初始化
$(function() {
  initTime();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="main-content">
  <div class="container shrinked">
    <h1 class="section-title center-aligned">我们正在准备一些新内容。<br> <span>敬请期待！</span></h1>

    <div class="counter-wrap">
      <div class="counter days">
        <div class="number">0</div>
        <div class="caption">天</div>
      </div>
      <!-- .counter -->
      <div class="counter hours">
        <div class="number">0</div>
        <div class="caption">小时</div>
      </div>
      <!-- .counter -->
      <div class="counter minutes">
        <div class="number">0</div>
        <div class="caption">分钟</div>
      </div>
      <!-- .counter -->
      <div class="counter seconds">
        <div class="number">0</div>
        <div class="caption">秒</div>
      </div>
      <!-- .counter -->
    </div>
    <!-- .counter-wrap -->

  </div>
  <!-- .container -->
</main>
<!-- .main-content -->

// 假设当前时间是 2023-06-03 10:00:00
// 重置为 7 天后，即 2023-06-10 10:00:00
const newTargetDate = new Date("2023-06-10T10:00:00").getTime(); // 替换为您希望的新日期
setCountDown(newTargetDate);

const now = new Date();
const sevenDaysLater = new Date(now.getTime() + (7 * 24 * 60 * 60 * 1000)); // 当前时间加上7天的毫秒数
setCountDown(sevenDaysLater.getTime());