当前位置：首页 > jquery

jquery倒计时插件

2026-02-04 08:24:05jquery

jQuery倒计时插件推荐与使用

推荐插件：jQuery Countdown

jQuery Countdown 是一个轻量级、高度可定制的倒计时插件，适用于各种场景如促销活动、限时抢购等。支持多种格式和回调函数。

安装方法

通过CDN引入或下载本地文件：

<script src="https://cdn.jsdelivr.net/npm/jquery-countdown@2.2.0/dist/jquery.countdown.min.js"></script>

基本用法示例

jquery倒计时插件

创建一个简单的倒计时：

$('#countdown').countdown('2025/12/31', function(event) {
  $(this).html(event.strftime('%D天 %H:%M:%S'));
});

高级配置选项

自定义格式：
```
event.strftime('%w周 %d日 %H:%M:%S');
```

完成回调：

$('#countdown').countdown('2025/12/31')
.on('finish.countdown', function() {
  alert('倒计时结束!');
});

替代插件：Final Countdown

特点

动画效果更丰富
响应式设计
支持多语言

使用示例

$('.timer').final_countdown({
  start: 1362139200,
  end: 1388461320,
  now: 1387461319
});

自定义开发指南

如需自定义开发，核心逻辑可参考：

function countdown(endDate, element) {
  const timer = setInterval(() => {
    const now = new Date().getTime();
    const distance = endDate - now;

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

    element.innerHTML = days + "d " + hours + "h ";

    if (distance < 0) {
      clearInterval(timer);
      element.innerHTML = "EXPIRED";
    }
  }, 1000);
}