当前位置：首页 > jquery

jquery 倒计时

2026-04-08 02:09:43jquery

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');

带格式化的倒计时

添加格式化功能使倒计时显示更美观：

jquery 倒计时

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>