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);
});注意事项
- 性能优化：对于长时间运行的倒计时，应考虑使用 requestAnimationFrame 替代 setInterval
- 时区处理：涉及具体日期的倒计时需要考虑用户时区差异
- 页面隐藏时暂停：使用 Page Visibility API 在标签页隐藏时暂停倒计时
- 内存管理：清除不再需要的计时器防止内存泄漏
扩展功能
-
添加动画效果：
$('#countdown').fadeOut(500).fadeIn(500); -
格式化输出：
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')}`; } -
添加回调函数：
onTick: function(remaining) { if (remaining === 30) { alert('还剩30秒！'); } }
