JavaScript实现简单的数字倒计时

下面我将详细讲解JavaScript实现简单的数字倒计时的完整攻略。

1. 实现思路

倒计时可以理解为是一段时间（比如30秒钟）的逆向计时，因此要实现数字倒计时，我们需要知道以下几个东西：

终止时间（即倒计时结束时间）
当前时间
剩余时间（即终止时间减去当前时间）

有了以上三个数据，我们就可以通过JavaScript来实现数字倒计时，具体步骤如下：

获取元素

首先，我们需要获取页面上的倒计时元素，以便于在JavaScript中操作它。

var countdownElement = document.getElementById('countdown');

计算剩余时间

我们可以使用new Date()对象来获取当前时间，再减去终止时间，就可以得到剩余时间的毫秒数。

var endTime = new Date('2021-12-31 23:59:59');
var remainingTime = endTime.getTime() - new Date().getTime();

将剩余时间转换为天、时、分、秒格式

接下来，我们需要将剩余时间转换为天、时、分、秒格式。这可以通过一些简单的算术操作来完成。

var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

更新倒计时元素

最后一步，我们将天、时、分、秒格式的剩余时间展示到页面上的倒计时元素中。

countdownElement.innerHTML =
  "距离2022年元旦还有 " +
  days +
  " 天 " +
  hours +
  " 小时 " +
  minutes +
  " 分钟 " +
  seconds +
  " 秒";

2. 示例说明

这里提供两个示例，一个是基础版的数字倒计时，另一个是带有动态效果的数字倒计时。

示例1：基础版的数字倒计时

这个示例中，我们只展示了倒计时的基础版，比如没有样式、没有动态效果等。但它仍然可以给读者提供一个直观感受，让他们理解倒计时的实现原理。

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript实现简单的数字倒计时</title>
  </head>
  <body>
    <div id="countdown"></div>

    <script>
      var countdownElement = document.getElementById("countdown");

      var endTime = new Date("2021-12-31 23:59:59");
      var remainingTime = endTime.getTime() - new Date().getTime();

      var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
      var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

      countdownElement.innerHTML =
        "距离2022年元旦还有 " +
        days +
        " 天 " +
        hours +
        " 小时 " +
        minutes +
        " 分钟 " +
        seconds +
        " 秒";
    </script>
  </body>
</html>

示例2：带有动态效果的数字倒计时

这个示例中，我们对基础版的倒计时进行了增强，加上了动态效果。即数字不是瞬间跳变的，而是平滑缓慢地过渡到下一个数字，让页面显得更加流畅生动。

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript实现带有动态效果的数字倒计时</title>
    <style>
      .countdown {
        font-size: 40px;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        margin-top: 50px;
      }
      .number {
        width: 80px;
        height: 80px;
        background-color: yellow;
        display: inline-block;
        margin: 0 10px;
        text-align: center;
        line-height: 80px;
        position: relative;
      }
      .number:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: orange;
        z-index: -1;
        opacity: 0;
        transition: all 0.3s ease-in-out;
      }
      .number.active:before {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="countdown">
      <span class="number" id="days"></span>
      <span class="number" id="hours"></span>
      <span class="number" id="minutes"></span>
      <span class="number" id="seconds"></span>
    </div>

    <script>
      var countdownElement = document.querySelector(".countdown");
      var daysElement = document.getElementById("days");
      var hoursElement = document.getElementById("hours");
      var minutesElement = document.getElementById("minutes");
      var secondsElement = document.getElementById("seconds");

      function updateCountdown() {
        var endTime = new Date("2021-12-31 23:59:59");
        var remainingTime = endTime.getTime() - new Date().getTime();

        var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
        var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

        // 用一个对象来存储每个数字对应的元素
        var elements = {
          days: daysElement,
          hours: hoursElement,
          minutes: minutesElement,
          seconds: secondsElement,
        };

        // 遍历所有数字元素，为每个元素添加active类名
        Object.keys(elements).forEach(function (key) {
          var element = elements[key];
          var value = eval(key);

          element.classList.remove("active");
          setTimeout(function () {
            element.innerHTML = value < 10 ? "0" + value : value;
            element.classList.add("active");
          }, 0);
        });

        // 每秒更新倒计时
        setTimeout(updateCountdown, 1000);
      }

      updateCountdown();
    </script>
  </body>
</html>

希望这篇文章对你有帮助！如果你还有其他问题，请继续问我。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现简单的数字倒计时 - Python技术站

JavaScript实现简单的数字倒计时

1. 实现思路

2. 示例说明

示例1：基础版的数字倒计时

示例2：带有动态效果的数字倒计时

相关文章