JS 倒计时实现代码(时、分，秒)

JS倒计时实现是Web开发中常见的一个功能之一，通常应用在活动页面、秒杀页面、公告页面等。这里我们给出用JavaScript实现时、分、秒倒计时的代码，以供参考。

实现原理

倒计时实现的原理是通过计算当前时间和目标时间之间的差距，再将时间差转化为时、分、秒，从而实现倒计时的效果。我们可以通过JavaScript中的Date()对象获取当前时间，并利用setInterval()函数实时更新当前时间，再通过计算时间差并转化为时、分、秒，最后将结果动态插入到HTML页面中。

实现步骤

1.获取目标时间

我们需要事先设置一个目标时间，然后用Date()对象获取当前时间，将当前时间和目标时间作差得到时间差。

// 获取目标时间
var targetTime = new Date("2022/01/01 00:00:00");
// 获取当前时间
var currentTime = new Date();
// 获取时间差
var diffTime = targetTime - currentTime;

2.将时间差转化为时、分、秒

我们可以通过以下步骤将时间差转化为时、分、秒：

• 计算小时数：将时间差除以3600000（1小时的毫秒数），并向下取整，得到小时数。
• 计算分钟数：将时间差除以60000（1分钟的毫秒数），并求余60，去掉小时部分的分钟数，得到分钟数。
• 计算秒数：将时间差除以1000（1秒的毫秒数），并求余60，得到秒数。

// 计算小时数
var hours = Math.floor(diffTime / 3600000);
// 计算分钟数
var minutes = Math.floor((diffTime % 3600000) / 60000);
// 计算秒数
var seconds = Math.floor((diffTime % 60000) / 1000);

3.实时更新倒计时

我们可以使用setInterval()函数每秒钟更新一次当前时间，并重新计算时间差，最后动态插入到HTML页面中。

// 定义更新倒计时函数
function updateTime() {
  // 获取目标时间
  var targetTime = new Date("2022/01/01 00:00:00");
  // 获取当前时间
  var currentTime = new Date();
  // 获取时间差
  var diffTime = targetTime - currentTime;
  // 计算小时数
  var hours = Math.floor(diffTime / 3600000);
  // 计算分钟数
  var minutes = Math.floor((diffTime % 3600000) / 60000);
  // 计算秒数
  var seconds = Math.floor((diffTime % 60000) / 1000);
  // 更新HTML页面
  document.getElementById("hours").innerHTML = hours;
  document.getElementById("minutes").innerHTML = minutes;
  document.getElementById("seconds").innerHTML = seconds;
}
// 每秒钟更新一次倒计时
setInterval(updateTime, 1000);

示例说明

以下是两个示例说明，分别演示了如何使用上述代码实现本地计算机的系统时间倒计时和固定目标时间倒计时。

示例1：本地计算机的系统时间倒计时

假如我们希望在HTML页面中展示本地计算机的系统时间，并做成时、分、秒倒计时格式，可以按照以下步骤实现：

1.在HTML页面中插入三个span元素，分别用于展示时、分、秒：

<span id="hours">00</span>小时
<span id="minutes">00</span>分钟
<span id="seconds">00</span>秒

2.使用上述代码实现时、分、秒倒计时的功能：

// 定义更新倒计时函数
function updateTime() {
  // 获取目标时间
  var targetTime = new Date();
  // 获取当前时间
  var currentTime = new Date();
  // 获取时间差
  var diffTime = targetTime - currentTime;
  // 计算小时数
  var hours = Math.floor(diffTime / 3600000);
  // 计算分钟数
  var minutes = Math.floor((diffTime % 3600000) / 60000);
  // 计算秒数
  var seconds = Math.floor((diffTime % 60000) / 1000);
  // 更新HTML页面
  document.getElementById("hours").innerHTML = hours;
  document.getElementById("minutes").innerHTML = minutes;
  document.getElementById("seconds").innerHTML = seconds;
}
// 每秒钟更新一次倒计时
setInterval(updateTime, 1000);

这样就实现了本地计算机的系统时间倒计时了。

示例2：固定目标时间倒计时

假如我们希望在HTML页面中展示距离2022年1月1日0时0分0秒的倒计时，可以按照以下步骤实现：

1.在HTML页面中插入三个span元素，分别用于展示时、分、秒：

<span id="hours">00</span>小时
<span id="minutes">00</span>分钟
<span id="seconds">00</span>秒

2.使用上述代码实现时、分、秒倒计时的功能：

// 定义更新倒计时函数
function updateTime() {
  // 获取目标时间
  var targetTime = new Date("2022/01/01 00:00:00");
  // 获取当前时间
  var currentTime = new Date();
  // 获取时间差
  var diffTime = targetTime - currentTime;
  // 计算小时数
  var hours = Math.floor(diffTime / 3600000);
  // 计算分钟数
  var minutes = Math.floor((diffTime % 3600000) / 60000);
  // 计算秒数
  var seconds = Math.floor((diffTime % 60000) / 1000);
  // 更新HTML页面
  document.getElementById("hours").innerHTML = hours;
  document.getElementById("minutes").innerHTML = minutes;
  document.getElementById("seconds").innerHTML = seconds;
}
// 每秒钟更新一次倒计时
setInterval(updateTime, 1000);

这样就实现了距离2022年1月1日0时0分0秒的倒计时了。