JS实现倒计时|极客笔记

JS实现倒计时

在网页开发中，倒计时功能是非常常见的需求，比如活动页面倒计时、限时抢购倒计时等等。使用JavaScript可以很方便地实现一个倒计时功能，下面我们就来详细讲解如何使用JS实现倒计时。

实现思路

实现倒计时的基本思路是，获取当前时间和目标时间之间的时间差，然后根据这个时间差不断更新显示的倒计时数字。具体来说，我们需要以下几个步骤来实现倒计时功能：

获取当前时间和目标时间
计算时间差
将时间差转换为时分秒的格式
更新页面显示

示例代码

下面是一个简单的实现倒计时功能的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>倒计时示例</title>
</head>
<body>
  <div id="countdown"></div>

  <script>
    // 获取当前时间和目标时间
    const targetDate = new Date('2022-01-01T00:00:00').getTime();

    // 更新倒计时函数
    function updateCountdown() {
      const currentDate = new Date().getTime();
      const timeDiff = targetDate - currentDate;

      // 将时间差转换为时分秒的格式
      const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

      // 更新页面显示
      document.getElementById('countdown').innerHTML = ` ${days} 天$ {hours} 时  ${minutes} 分$ {seconds} 秒`;

      // 每秒更新一次
      setTimeout(updateCountdown, 1000);
    }

    // 初次调用
    updateCountdown();
  </script>
</body>
</html>

在上面的代码中，我们首先获取了目标时间，这里设定目标时间为2022年1月1日。然后编写了一个updateCountdown函数，在每次调用时计算当前时间和目标时间的时间差，并将时间差转换为天、时、分、秒的格式，最后更新页面显示。通过setTimeout函数每秒调用一次updateCountdown函数，实现页面上的倒计时效果。