详解JS实现简单的时分秒倒计时代码

下面我来详细讲解一下实现简单的时分秒倒计时代码的攻略。

步骤一：HTML布局

在HTML中创建一个div容器，将时分秒倒计时展示在这个容器中。

<div id="countdown"></div>

步骤二：JS编写

1. 获取要倒计时的时间

首先，获取要倒计时的时间，可以通过获取当前的时间戳来计算目标时间戳。

var targetTime = new Date('2021-12-31').getTime(); // 目标时间的时间戳

2. 实现时间格式化函数

接下来，实现将时间戳格式化成倒计时所需的时分秒格式的函数。

function formatTime(time) {
  var hour = Math.floor(time / (60 * 60 * 1000)); // 计算小时数
  var minute = Math.floor((time - hour * 60 * 60 * 1000) / (60 * 1000)); // 计算分钟数
  var second = Math.floor((time - hour * 60 * 60 * 1000 - minute * 60 * 1000) / 1000); // 计算秒数

  // 将时分秒格式化为两位数
  hour = hour < 10 ? "0" + hour : hour;
  minute = minute < 10 ? "0" + minute : minute;
  second = second < 10 ? "0" + second : second;

  return hour + ":" + minute + ":" + second;
}

3. 实现倒计时函数

接着，实现倒计时函数，每秒钟更新一次倒计时时间：

function countdown() {
  var nowTime = new Date().getTime(); // 获取当前时间戳
  var deltaTime = targetTime - nowTime; // 计算时间差

  // 如果时间差小于等于0，则说明时间到了
  if (deltaTime <= 0) {
    document.getElementById("countdown").innerText = "时间到了！";
    clearInterval(timer); // 清除定时器
    return;
  }

  // 将时间差格式化为时分秒格式，并展示在页面上
  document.getElementById("countdown").innerText = formatTime(deltaTime);
}

4. 定时器

最后，使用setInterval()函数启动定时器，每秒钟更新一次倒计时时间：

var timer = setInterval(function() {
  countdown();
}, 1000);

示例说明

示例一

假设现在是2021年10月20日，我们想倒计时到2022年春节的最后一天，也就是2022年2月8日。

var targetTime = new Date('2022-02-08').getTime(); // 目标时间的时间戳

示例二

假设现在是2021年10月20日，我们想倒计时到2022年的最后一天，也就是2022年12月31日。

var targetTime = new Date('2022-12-31').getTime(); // 目标时间的时间戳

以上就是详解JS实现简单的时分秒倒计时代码的完整攻略，希望能对您有所帮助。