jquery 倒计时

jQuery 倒计时实现方法

使用 jQuery 实现倒计时功能可以通过多种方式完成，以下是几种常见的方法：

方法一：使用 setInterval 实现简单倒计时

$(document).ready(function() {
  let count = 10; // 设置初始倒计时秒数

  const timer = setInterval(function() {
    count--;
    $('#countdown').text(count);

    if (count <= 0) {
      clearInterval(timer);
      $('#countdown').text('时间到！');
    }
  }, 1000);
});

HTML 部分需要包含一个显示倒计时的元素：

<div id="countdown">10</div>

方法二：实现可配置的倒计时插件

$.fn.countdown = function(options) {
  const settings = $.extend({
    seconds: 60,
    onComplete: function() {}
  }, options);

  return this.each(function() {
    const $this = $(this);
    let remaining = settings.seconds;

    const interval = setInterval(function() {
      $this.text(remaining);
      remaining--;

      if (remaining < 0) {
        clearInterval(interval);
        settings.onComplete.call($this);
      }
    }, 1000);
  });
};

// 使用方式
$('#my-countdown').countdown({
  seconds: 30,
  onComplete: function() {
    $(this).text('倒计时结束');
  }
});

方法三：实现日期倒计时（距离特定时间）

function updateCountdown(endDate, element) {
  const now = new Date();
  const diff = endDate - now;

  if (diff <= 0) {
    element.text('活动已结束');
    return;
  }

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

  element.text(`${days}天 ${hours}小时 ${minutes}分 ${seconds}秒`);
}

$(document).ready(function() {
  const endDate = new Date('2023-12-31T23:59:59');
  setInterval(function() {
    updateCountdown(endDate, $('#event-countdown'));
  }, 1000);
});

注意事项

1. 性能优化：对于长时间运行的倒计时，应考虑使用 requestAnimationFrame 替代 setInterval
2. 时区处理：涉及具体日期的倒计时需要考虑用户时区差异
3. 页面隐藏时暂停：使用 Page Visibility API 在标签页隐藏时暂停倒计时
4. 内存管理：清除不再需要的计时器防止内存泄漏

扩展功能

1. 添加动画效果：

   $('#countdown').fadeOut(500).fadeIn(500);

2. 格式化输出：

   function formatTime(seconds) {
   const hrs = Math.floor(seconds / 3600);
   const mins = Math.floor((seconds % 3600) / 60);
   const secs = seconds % 60;
   return `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
   }

3. 添加回调函数：

   onTick: function(remaining) {
   if (remaining === 30) {
    alert('还剩30秒！');
   }
   }