jQuery 实现倒计时天,时,分,秒功能

2023年5月27日下午3:22 • JavaScript

引入jQuery库

在使用jQuery之前，需要先引入jQuery库。

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

创建一个倒计时标签

通过HTML和CSS创建一个倒计时标签，用来显示倒计时的天数、小时数、分钟数和秒数。

<div id="countdown">
  <div id="days" class="countdown-item"></div>
  <div id="hours" class="countdown-item"></div>
  <div id="minutes" class="countdown-item"></div>
  <div id="seconds" class="countdown-item"></div>
</div>

#countdown {
  display: flex;
  justify-content: center;
  align-items: center;
}

.countdown-item {
  font-size: 32px;
  font-weight: bold;
  margin-right: 20px;
}

编写jQuery代码

通过jQuery编写倒计时功能，将距离目标时间的天、小时、分钟和秒数计算出来，并显示在倒计时标签中。

function countdown() {
  // 设置目标时间
  var targetTime = new Date('2022/01/01 00:00:00');

  // 计算剩余时间
  var now = new Date();
  var diff = Math.floor((targetTime - now) / 1000);
  var days = Math.floor(diff / (24 * 60 * 60));
  var hours = Math.floor((diff - days * 24 * 60 * 60) / (60 * 60));
  var minutes = Math.floor((diff - days * 24 * 60 * 60 - hours * 60 * 60) / 60);
  var seconds = diff - days * 24 * 60 * 60 - hours * 60 * 60 - minutes * 60;

  // 更新倒计时标签
  $('#days').text(days + '天');
  $('#hours').text(hours + '小时');
  $('#minutes').text(minutes + '分钟');
  $('#seconds').text(seconds + '秒');
}

// 每秒更新倒计时
setInterval(countdown, 1000);

示例说明

示例1：在页面头部加入一个类似于秒杀活动的倒计时功能，倒计时时间为10分钟。

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <div class="seckill-countdown">
    距离本场秒杀结束还剩：
    <span id="minutes"></span>
    <span id="seconds"></span>
  </div>
  <script>
    function countdown() {
      var targetTime = new Date();
      targetTime.setMinutes(targetTime.getMinutes() + 10);  // 10分钟后结束

      var now = new Date();
      var diff = Math.floor((targetTime - now) / 1000);
      var minutes = Math.floor(diff / 60);
      var seconds = diff - minutes * 60;

      $('#minutes').text(minutes + '分');
      $('#seconds').text(seconds + '秒');
      if (diff <= 0) {
        clearInterval(intervalID);
        $('#minutes').text(0 + '分');
        $('#seconds').text(0 + '秒');
      }
    }
    var intervalID = setInterval(countdown, 1000);
  </script>
</body>

示例2：在网站的首页中加入一个距离国庆节的倒计时功能。

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <div class="countdown">
    距离国庆节还有：
    <span id="days"></span>
    <span id="hours"></span>
    <span id="minutes"></span>
    <span id="seconds"></span>
  </div>
  <script>
    function countdown() {
      var targetTime = new Date('2022/10/01 00:00:00');
      var now = new Date();
      var diff = Math.floor((targetTime - now) / 1000);
      var days = Math.floor(diff / (24 * 60 * 60));
      var hours = Math.floor((diff - days * 24 * 60 * 60) / (60 * 60));
      var minutes = Math.floor((diff - days * 24 * 60 * 60 - hours * 60 * 60) / 60);
      var seconds = diff - days * 24 * 60 * 60 - hours * 60 * 60 - minutes * 60;

      $('#days').text(days + '天');
      $('#hours').text(hours + '小时');
      $('#minutes').text(minutes + '分钟');
      $('#seconds').text(seconds + '秒');
      if (diff <= 0) {
        clearInterval(intervalID);
        $('#days').text(0 + '天');
        $('#hours').text(0 + '小时');
        $('#minutes').text(0 + '分钟');
        $('#seconds').text(0 + '秒');
      }
    }
    var intervalID = setInterval(countdown, 1000);
  </script>
</body>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 实现倒计时天,时,分,秒功能 - Python技术站