jquery倒计时-千锋教育

jquery倒计时

发布时间:2023-06-16 16:43:00

发布人:zyh

　　要在jQuery中实现倒计时功能，你可以使用`setInterval`函数结合JavaScript的Date对象来更新倒计时显示。

　　以下是一个使用jQuery实现倒计时的示例：　　

<!DOCTYPE html>
<html>
<head>
  <title>jQuery倒计时示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="countdown"></div>

  <script>
    $(document).ready(function() {
      // 设置目标日期和时间
      var targetDate = new Date("2023-06-30T00:00:00").getTime();

      // 更新倒计时显示
      var countdownInterval = setInterval(function() {
        // 获取当前日期和时间
        var now = new Date().getTime();

        // 计算距离目标日期的时间差
        var timeDiff = targetDate - now;

        // 计算剩余的天数、小时、分钟和秒数
        var days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
        var hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

        // 更新倒计时显示
        $("#countdown").text(days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒");

        // 当倒计时结束时清除定时器
        if (timeDiff <= 0) {
          clearInterval(countdownInterval);
          $("#countdown").text("倒计时结束");
        }
      }, 1000); // 每秒更新一次倒计时显示
    });
  </script>
</body>
</html>

　　在上述示例中，我们设置了目标日期和时间`targetDate`，然后使用`setInterval`函数每秒钟更新一次倒计时显示。在每次更新时，我们计算当前日期和目标日期之间的时间差，并将其转换为天数、小时、分钟和秒数。然后，我们将这些值更新到具有`id="countdown"`的HTML元素中。