js实现倒计时效果

实现效果

实现代码

const computingTime = startTime => {
  // 目标日期
  const targetDate = new Date(startTime).getTime();

  // 每秒更新倒计时
  const timer = setInterval(function() {
    // 当前时间
    const now = new Date().getTime();

    // 距离目标时间的毫秒数
    const distance = targetDate - now;

    // 计算剩余时间
    //小时
    const hours = Math.floor(distance / (1000 * 60 * 60));
    //分
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    //秒
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
    // 显示剩余时间
    countDown.value = `${hours}:${minutes}:${seconds} 秒`;
   
    // 如果目标时间已过，则停止计时器
    if (distance < 0) {
      clearInterval(timer);
      document.getElementById("countdown").innerHTML = "倒计时结束";
    }
  }, 1000); // 每秒更新一次
};

实现思路

既然是倒计时，肯定是要涉及到时间日期的操作了。js 里可以用 new Date() 来创建各种格式的时间日期。还涉及到定时器的使用。计算出当前时间和目标时间的时间差，还要对剩余时间做下处理，得出时、分、秒，然后通过重复调用，每隔 1 秒刷新一次就实现了。