jquery 倒计时
jQuery 倒计时实现方法
使用 jQuery 实现倒计时功能可以通过多种方式完成，以下是几种常见的实现方法。
基础倒计时实现
创建一个简单的倒计时器，从指定时间开始倒计时：
function startCountdown(seconds, element) {
var timer = setInterval(function() {
seconds--;
$(element).text(seconds);
if (seconds <= 0) {
clearInterval(timer);
$(element).text("时间到！");
}
}, 1000);
}
// 调用示例
startCountdown(60, '#countdown');日期倒计时
计算到特定日期的剩余时间：
function dateCountdown(targetDate, element) {
var timer = setInterval(function() {
var now = new Date();
var distance = targetDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
$(element).text(days + "天 " + hours + "时 " + minutes + "分 " + seconds + "秒 ");
if (distance < 0) {
clearInterval(timer);
$(element).text("活动已结束");
}
}, 1000);
}
// 调用示例
var target = new Date("2023-12-31T23:59:59");
dateCountdown(target, '#event-countdown');带格式化的倒计时
添加格式化功能使倒计时显示更美观：
function formattedCountdown(seconds, element) {
function formatTime(sec) {
var h = Math.floor(sec / 3600);
var m = Math.floor((sec % 3600) / 60);
var s = sec % 60;
return (h > 0 ? h + ":" : "") + (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s);
}
var timer = setInterval(function() {
$(element).text(formatTime(seconds));
if (seconds <= 0) {
clearInterval(timer);
}
seconds--;
}, 1000);
}
// 调用示例
formattedCountdown(3661, '#formatted-timer');带回调的倒计时
添加倒计时结束时的回调函数：
function callbackCountdown(seconds, element, callback) {
var timer = setInterval(function() {
$(element).text(seconds);
seconds--;
if (seconds < 0) {
clearInterval(timer);
if (typeof callback === 'function') {
callback();
}
}
}, 1000);
}
// 调用示例
callbackCountdown(10, '#callback-timer', function() {
alert('倒计时结束！');
});暂停和继续功能
添加控制按钮实现暂停和继续功能：
var countdownTimer;
var remainingSeconds = 60;
function startPausableCountdown(element) {
countdownTimer = setInterval(function() {
$(element).text(remainingSeconds);
remainingSeconds--;
if (remainingSeconds < 0) {
clearInterval(countdownTimer);
}
}, 1000);
}
function pauseCountdown() {
clearInterval(countdownTimer);
}
function resumeCountdown() {
startPausableCountdown('#pausable-timer');
}
// HTML中需要添加控制按钮
// <button onclick="pauseCountdown()">暂停</button>
// <button onclick="resumeCountdown()">继续</button>注意事项
- 确保在页面加载完成后初始化倒计时，可以将代码放在
$(document).ready()中 - 清除定时器使用
clearInterval()避免内存泄漏 - 对于长时间运行的倒计时，考虑使用服务器时间而非客户端时间以提高准确性
- 移动端设备休眠时定时器可能暂停，需要特殊处理
这些方法可以根据具体需求进行组合和修改，实现各种倒计时效果。
