带有时刻 JS 的倒数计时器

在网站开发中，经常需要倒数计时功能，比如秒杀活动倒计时、新年倒计时等。本文将介绍如何使用 JavaScript 实现一个带有时刻的倒数计时器。

实现思路

倒数计时器的实现思路如下：

1. 获取目标日期时间和当前日期时间
2. 计算目标日期时间和当前日期时间之间的时间差
3. 将时间差转换为天数、小时、分钟和秒数
4. 修改 HTML 中对应的元素内容
5. 每秒更新时间差和对应的元素内容

在 HTML 中需要加入元素，用于显示倒数计时器的时刻。例如：

<p>剩余时间：<span id="days"></span> 天 <span id="hours"></span> 小时 <span id="minutes"></span> 分钟 <span id="seconds"></span> 秒</p>

<span> 标签用于显示时间，id 属性用于 JavaScript 修改元素内容。

实现代码

JavaScript 代码如下：

function countdown(targetDate) {
  // 获取目标日期时间和当前日期时间
  const targetTime = Date.parse(targetDate);
  const currentTime = Date.parse(new Date());

  // 计算时间差
  let timeDiff = Math.floor((targetTime - currentTime) / 1000);

  // 计算天数、小时、分钟和秒数
  const secondsInDay = 86400;
  const secondsInHour = 3600;
  const secondsInMinute = 60;
  const days = Math.floor(timeDiff / secondsInDay);
  timeDiff = timeDiff % secondsInDay;
  const hours = Math.floor(timeDiff / secondsInHour);
  timeDiff = timeDiff % secondsInHour;
  const minutes = Math.floor(timeDiff / secondsInMinute);
  timeDiff = timeDiff % secondsInMinute;
  const seconds = timeDiff;

  // 修改 HTML 中对应的元素内容
  document.getElementById("days").innerHTML = days;
  document.getElementById("hours").innerHTML = hours;
  document.getElementById("minutes").innerHTML = minutes;
  document.getElementById("seconds").innerHTML = seconds;

  // 每秒更新
  setInterval(function () {
    // 执行同样的计算和修改操作
  }, 1000);
}

countdown("2022-01-01T00:00:00");

其中 targetDate 参数为目标日期时间的字符串表示，例如 "2022-01-01T00:00:00"。

总结

本文介绍了一个带有时刻的倒数计时器的实现，通过定时器每秒更新页面内容，实现了一个实时的倒计时效果。此外，该计时器也可带有时分秒的效果，可以根据需求进行修改。