如何实现CodePen上的倒计时器每30天重复触发？

阿华AIGC实验室

2026-4-30

实现每30天重复触发的倒计时器

要让你的倒计时器每30天自动重复，核心是动态计算下一个到期时间，而不是依赖固定的结束日期。以下是具体的修改步骤和代码示例：

1. 替换固定结束时间为动态计算逻辑

原来的const end = new Date(2021, 8, 15, 13, 0,12, 12);是硬编码的固定日期，我们需要改成基于这个初始日期，自动计算当前时间之后的下一个30天周期节点。

具体思路：

先保留你的基准起始日期（就是你最初设置的2021-09-15 13:00:12）
计算从基准日期到当前时间的总毫秒差，除以30天的毫秒数，得到已经过了多少个完整的30天周期
用基准日期加上「已过周期数+1」个30天，就是下一次要倒计时的结束时间

2. 倒计时结束后自动重置

当倒计时归0时，需要重新调用计算函数，生成下一个30天后的结束时间，让倒计时循环运行。

修改后的完整代码示例

// 基准起始日期（对应你原来的2021-09-15 13:00:12，注意JS中月份是0索引）
const baseDate = new Date(2021, 8, 15, 13, 0, 12, 12);
const thirtyDaysInMs = 30 * 24 * 60 * 60 * 1000; // 30天对应的毫秒数

// 计算下一个倒计时结束时间的工具函数
function getNextEndDate() {
  const now = Date.now();
  // 计算从基准日到现在的时间差
  const timeDiff = now - baseDate.getTime();
  // 算出已经过了多少个完整的30天周期
  const cyclesPassed = Math.floor(timeDiff / thirtyDaysInMs);
  // 下一个结束时间 = 基准日 + (已过周期数+1)个30天
  return new Date(baseDate.getTime() + (cyclesPassed + 1) * thirtyDaysInMs);
}

// 初始化倒计时结束时间
let end = getNextEndDate();

// 你的倒计时更新逻辑（适配原有功能）
function updateCountdown() {
  const now = new Date();
  const diff = end - now;

  // 处理倒计时结束的情况：重置下一个结束时间+触发结束逻辑
  if (diff <= 0) {
    end = getNextEndDate();
    console.log("倒计时结束！30天后将再次触发");
    // 这里可以添加你需要的结束回调，比如弹窗、播放提示音等
  }

  // 计算天/时/分/秒（原有逻辑保留）
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);

  // 更新DOM显示（替换成你实际的元素ID）
  document.getElementById('days').textContent = days;
  document.getElementById('hours').textContent = hours;
  document.getElementById('minutes').textContent = minutes;
  document.getElementById('seconds').textContent = seconds;
}

// 启动倒计时定时器（每秒更新一次）
setInterval(updateCountdown, 1000);