jquery倒计时

使用jQuery实现倒计时功能

倒计时功能在网页中常用于促销活动、限时抢购等场景。以下是几种常见的实现方式：

基础倒计时实现

function countDown(endTime, element) {
  const timer = setInterval(function() {
    const now = new Date().getTime();
    const distance = endTime - now;

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

    $(element).html(days + "天 " + hours + "时 " + minutes + "分 " + seconds + "秒 ");

    if (distance < 0) {
      clearInterval(timer);
      $(element).html("已过期");
    }
  }, 1000);
}

// 使用示例：设置一个24小时后的倒计时
const endDate = new Date();
endDate.setDate(endDate.getDate() + 1);
countDown(endDate, '#countdown');

可配置的倒计时插件

创建一个更灵活的倒计时插件：

(function($) {
  $.fn.countdown = function(options) {
    const settings = $.extend({
      endTime: new Date().getTime() + 86400000, // 默认24小时后
      onEnd: function() {},
      format: 'DD:HH:MM:SS'
    }, options);

    return this.each(function() {
      const element = $(this);
      const timer = setInterval(updateTimer, 1000);

      function updateTimer() {
        const now = new Date().getTime();
        const distance = settings.endTime - now;

        if (distance <= 0) {
          clearInterval(timer);
          settings.onEnd.call(element);
          return;
        }

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

        let output = settings.format
          .replace('DD', days)
          .replace('HH', hours)
          .replace('MM', minutes)
          .replace('SS', seconds);

        element.html(output);
      }

      updateTimer();
    });
  };
}(jQuery));

// 使用示例
$('#countdown').countdown({
  endTime: new Date('2023-12-31').getTime(),
  format: '剩余: DD天HH小时MM分钟SS秒',
  onEnd: function() {
    $(this).html('活动已结束');
  }
});

天/小时/分钟/秒单独显示

如果需要单独控制每个时间单位的显示：

<div class="countdown">
  <span class="days"></span>天
  <span class="hours"></span>时
  <span class="minutes"></span>分
  <span class="seconds"></span>秒
</div>

<script>
$(document).ready(function() {
  const endDate = new Date();
  endDate.setHours(endDate.getHours() + 48); // 48小时后

  const timer = setInterval(function() {
    const now = new Date();
    const distance = endDate - now;

    if (distance <= 0) {
      clearInterval(timer);
      $('.countdown').html('时间到');
      return;
    }

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

    $('.days').text(days);
    $('.hours').text(hours);
    $('.minutes').text(minutes);
    $('.seconds').text(seconds);
  }, 1000);
});
</script>

带样式的倒计时

为倒计时添加CSS样式：

.countdown {
  font-family: Arial, sans-serif;
  font-size: 24px;
  color: #333;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 5px;
  display: inline-block;
}

.countdown span {
  display: inline-block;
  min-width: 30px;
  text-align: center;
  padding: 5px;
  background: #fff;
  margin: 0 5px;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

服务器时间同步

为了避免客户端时间不准确的问题，可以从服务器获取时间：

$.get('/api/server-time', function(serverTime) {
  const endTime = new Date(serverTime);
  endTime.setHours(endTime.getHours() + 2); // 2小时后结束

  const timer = setInterval(function() {
    const now = new Date();
    const distance = endTime - now;

    // 倒计时逻辑...
  }, 1000);
});

以上方法提供了不同复杂度的jQuery倒计时实现，可以根据项目需求选择适合的方案。基础版本适合简单需求，插件版本更适合重复使用，服务器时间同步则解决了客户端时间不准确的问题。