如何实现倒计时展示1天通知后每周自动重置（附现有代码）

原代码的核心调整方向 #

目前的实现仅支持单次倒计时逻辑，时间到点后直接清除定时器终止运行，缺少两个关键能力：

• 没有自动循环重置的逻辑，必须手动修改硬编码的截止日期才能重启流程
• 没有针对「到期当日」的时间窗口做判断，无法实现当日展示通知、当日结束自动切回倒计时的效果

具体调整内容 #

1. 把硬编码的固定截止日期替换为可配置的周期参数，每次需要重启倒计时时自动计算下一轮的截止时间，不需要手动改代码
2. 移除到点就清除定时器的逻辑，保持每秒持续检测状态，不需要中断运行
3. 新增日期比对逻辑，精准判断当前时间是否处于到期日的展示窗口内，自动切换倒计时模块和通知模块的显示状态
4. 检测到当日窗口结束时，自动生成下一轮的截止时间，无缝衔接下一轮倒计时流程

调整后可直接运行的完整代码 #

JS 部分 #

// 可自行调整：每轮倒计时的间隔天数，比如设为100就是每100天触发一次到期通知
const CYCLE_DAYS = 100;
// 可自行调整：到期当日是否全天展示通知，默认开启
const DISPLAY_ALL_DAY = true;

function getTimeRemaining(endtime) {
  const t = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor((t / 1000) % 60);
  const minutes = Math.floor((t / 1000 / 60) % 60);
  const hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  const days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    total: t,
    days: days,
    hours: hours,
    minutes: minutes,
    seconds: seconds
  };
}

// 自动计算下一轮的截止时间
function getNextDeadline(baseTime = new Date()) {
  const target = new Date(baseTime.getTime());
  target.setDate(target.getDate() + CYCLE_DAYS);
  // 如果需要固定到期时间点（比如晚上20点），可以在这里设置
  // target.setHours(20, 0, 0, 0);
  return target;
}

function initializeClock(id, endtime) {
  const clock = document.getElementById(id);
  const daysSpan = clock.querySelector('.days');
  const hoursSpan = clock.querySelector('.hours');
  const minutesSpan = clock.querySelector('.minutes');
  const secondsSpan = clock.querySelector('.seconds');
  const clockEl = document.getElementById('clockdiv');
  const noticeEl = document.getElementById('timeIsNow');
  let currentDeadline = endtime;

  function updateClock() {
    const now = new Date();
    const t = getTimeRemaining(currentDeadline);

    // 判断当前时间是否处于到期日的展示窗口
    const isSameDay = now.toDateString() === currentDeadline.toDateString();
    // 判断当前日期是否已经过了到期日的结束时间
    const isAfterDeadline = t.total < 0;

    // 状态切换逻辑
    if (isSameDay && DISPLAY_ALL_DAY) {
      // 处于到期展示日：隐藏倒计时，显示通知
      clockEl.className = 'hidden-div';
      noticeEl.className = 'visible-div';
    } else if (isAfterDeadline) {
      // 当日窗口已结束：自动生成下一轮截止时间，切回倒计时
      currentDeadline = getNextDeadline(now);
      clockEl.className = '';
      noticeEl.className = 'hidden-div';
      // 刷新下一轮的初始倒计时数字
      const nextT = getTimeRemaining(currentDeadline);
      daysSpan.innerHTML = ('0' + nextT.days).slice(-2);
      hoursSpan.innerHTML = ('0' + nextT.hours).slice(-2);
      minutesSpan.innerHTML = ('0' + nextT.minutes).slice(-2);
      secondsSpan.innerHTML = ('0' + nextT.seconds).slice(-2);
    } else {
      // 正常倒计时状态：更新数字，显示倒计时、隐藏通知
      daysSpan.innerHTML = ('0' + t.days).slice(-2);
      hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
      minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
      secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
      clockEl.className = '';
      noticeEl.className = 'hidden-div';
    }
  }

  updateClock(); 
  setInterval(updateClock, 1000);
}

// 首次启动时自动计算第一个截止时间，不需要硬编码日期
const initialDeadline = getNextDeadline();
initializeClock('clockdiv', initialDeadline);

HTML 部分（保留原有样式和结构即可，无修改） #

<style>
.cent {
  margin: auto;
  width: 50%;
  padding: 10px;
    text-align: center;
}
h1{
  color: #396;
  font-weight: 500;
  font-size: 30px;
  margin: 0px 0px 0px;
}
#clockdiv{
  font-family: sans-serif;
  color: #fff;
  display: inline-block;
  font-weight: 100;
  text-align: center;
  font-size: 20px;
}
#clockdiv > div{
  padding: 10px;
  border-radius: 8px;
  background: #121212;
  display:inline-block;
  margin: 1px;
}
#clockdiv div > span{
  padding: 08px;
  border-radius: 8px;
  background: #f12e70;
  display: inline-block;
}
.smalltext{
  padding-top: 5px;
  font-size: 16px;
}
.hidden-div {
  visibility: hidden;
}
.visible-div {
  visibility: visible;
}
</style>

<div id="timeIsNow" class="hidden-div">
  <h1>Message is Live</h1>
</div>

<div id="clockdiv">
  <div>
    <span class="days"></span>
    <div class="smalltext">D</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">H</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">M</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">S</div>
  </div>
</div>

使用说明 #

• 调整开头的CYCLE_DAYS参数，即可设置每轮倒计时的间隔长度，不需要修改其他逻辑
• 如果不需要全天展示通知，只需要把DISPLAY_ALL_DAY设为false，同时在getNextDeadline函数里指定具体的展示时间点即可
• 所有时间计算、状态切换、倒计时重置都在前端自动运行，全程不需要手动修改日期配置

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