如何用 JavaScript 动态创建一个活动倒计时功能

最编程 2024-02-23 15:38:04

...

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

活动倒计时，其实挺常见的，不说远的，最近就有不少双十一活动，下面就以实现一个活动倒计时的小需求来展开讲讲。

下面是需求细节点

活动开始时间：2021-11-01 00:00:00
活动结束时间：2021-11-19 23:59:59
倒计时文案
1. 活动前：距活动开始 x天x时x分x秒
2. 活动中：距活动结束 x天x时x分x秒
3. 活动结束：活动已结束！更多优惠请在线咨询

原理

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

实战

来写个代码吧，下面是完整代码，有对应的注释说明

有个小细节需要注意，如果是 10 以下的数我们要进行补零！我们写一个补零函数，名字为addZero。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS 实现一个活动倒计时</title>
</head>
<body>
  <h1 id="activityText"></h1>
  <script>
    countDown();
    function countDown() {
      function addZero(i) {
        return i < 10 ? "0" + i : i;
      }
      let activityText = document.querySelector('#activityText');
      let timer = null;
      const startTime = new Date('2021-11-01 00:00:00');
      const endTime = new Date('2021-11-19 23:59:59');
      // 注：这里是直接使用用户本地系统时间做演示
      const nowTime = new Date();
      // 当前时间距离活动开始时间的差值
      const beginDiff = parseInt((startTime.getTime() - nowTime.getTime()) / 1000);
      //当前时间距离活动结束时间的差值
      const endDiff = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
      // 剩余时间
      const leftTime = beginDiff > 0 ? beginDiff : endDiff;
      let day = parseInt(leftTime / (24 * 60 * 60))
      let hour = parseInt(leftTime / (60 * 60) % 24);
      let minute = parseInt(leftTime / 60 % 60);
      let second = parseInt(leftTime % 60);
      day = addZero(day);
      hour = addZero(hour);
      minute = addZero(minute);
      second = addZero(second);

      if (beginDiff > 0) {
        activityText.innerText = `距活动开始 ${day}天 ${hour}时 ${minute}分 ${second}秒`;
        timer = setTimeout(countDown, 1000);
      } else if (leftTime <= 0) {
        activityText.innerText = '活动已结束！更多优惠请在线咨询';
        clearTimeout(timer);
      } else {
        activityText.innerText = `距活动结束 ${day}天 ${hour}时 ${minute}分 ${second}秒`;
        timer = setTimeout(countDown, 1000);
      }
    }
  </script>
</body>
</html>

写到最后

最终效果是下面的图片这样的。

倒计时.gif

其实活动倒计时，使用 setTimout 或者 setInterval 来对一个函数进行递归或者重复调用，然后对 DOM 节点做对应的 render 处理，并对时间做倒计时的格式化处理。

上面那种写法，是面向过程，无法扩展的，但是可以实现具体效果，还可以更加深入了解一些细节，比如使用面向对象编程的思路，来实现倒计时。

完。

上一篇：如何简易创建一个5秒倒计时，完成后自动跳转的JavaScript示例

下一篇：如何在JavaScript中实现倒计时功能？从天到时再到分和秒的详细教程

如何用 JavaScript 动态创建一个活动倒计时功能

前言

原理

实战

写到最后

如何用JavaScript轻松创建倒计时功能

如何用 JavaScript 动态创建一个活动倒计时功能