如何实现倒计时显示至2后隐藏数字，继续计数至-1

修改后的实现代码 #

// 初始化配置
let count = 3; // 可根据实际需求调整初始倒计时数值
const countDisplay = document.getElementById('count-number');
const bannerImage = document.getElementById('banner-image');

// 图片地址配置
const imageUrls = {
  oneDay: 'path/to/one-day-image.jpg',
  during: 'path/to/during-image.jpg',
  after: 'path/to/after-image.jpg'
};

// 启动倒计时定时器
const countdownTimer = setInterval(() => {
  // 按count值执行对应逻辑
  if (count === 1) {
    // 隐藏数字（最后显示的是2）
    countDisplay.style.display = 'none';
    // 切换至倒计时1天的图片
    bannerImage.src = imageUrls.oneDay;
  } else if (count === 0) {
    // 切换至进行中的图片
    bannerImage.src = imageUrls.during;
  } else if (count < 0) {
    // 切换至结束后的图片并终止定时器
    bannerImage.src = imageUrls.after;
    clearInterval(countdownTimer);
    return; // 提前退出，避免count继续递减
  }

  // 仅当count≥2时显示数字
  if (count >= 2) {
    countDisplay.textContent = count;
  }

  // 倒计时数值递减
  count--;
}, 1000);

核心逻辑说明 #

• 避免提前终止定时器：仅在count < 0时调用clearInterval，确保倒计时能完整运行至-1才停止，所有后续逻辑都能触发
• 数字显示控制：只有当count ≥2时才更新并显示数字，count=1时直接隐藏元素，保证最后显示的数字是2
• 图片切换时机：每个count值对应的图片切换逻辑放在最前面执行，确保状态切换的准确性
• 边界处理：当count <0时处理完图片切换后立即退出回调，避免count继续无意义递减

后续转基于用户时区的日期倒计时思路 #

1. 放弃固定count值：改为计算目标时间（如活动开始/结束时间）与用户本地时间的差值
2. 使用本地时区时间：new Date()默认返回用户本地时区的时间，直接用它计算时间差即可，无需额外时区转换
3. 时间差转换：将时间差（毫秒）转换为天/时/分/秒的格式，对应原逻辑中的count状态（比如剩余1天对应原count=1的逻辑，已过期对应count<0）
4. 边界场景处理：需考虑剩余时间刚好为整数天、不足1天等情况，确保状态切换准确

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