JS秒杀倒计时功能完整实例【使用jQuery3.1.1】

JS秒杀倒计时功能是电商网站等常用的功能之一，本文将详细讲解如何进行实现，以及使用jQuery3.1.1优化过程。

步骤一：HTML代码

首先，我们需要将倒计时模块添加到HTML中，代码如下：

<div id="countdown">
    <span class="days"></span> 天 
    <span class="hours"></span> 时 
    <span class="minutes"></span> 分 
    <span class="seconds"></span> 秒
</div>

步骤二：JS代码

接下来，我们需要编写JS代码实现倒计时功能。先定义倒计时时间戳，以秒为单位，如：

var endTime = new Date('2022/01/01 00:00:00').getTime();

接着，我们需要编写一个计时器函数来更新倒计时模块中的时间数。计时器函数的主要逻辑如下：

function countdown() {
    var nowTime = new Date().getTime(),
        timeLeft = endTime - nowTime;
    if (timeLeft < 0) {
        // 倒计时结束
        $('#countdown').html('已结束');
        clearInterval(countdownTimer);
        return;
    }
    var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)),
        hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
        minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)),
        seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
    $('#countdown .days').text(days);
    $('#countdown .hours').text(hours);
    $('#countdown .minutes').text(minutes);
    $('#countdown .seconds').text(seconds);
}

在以上的代码中，我们首先计算当前时间与倒计时结束时间的时间差，并根据时间差计算出剩余天、小时、分钟和秒数。然后，分别将这些数值添加到对应的HTML元素中。

最后，通过setInterval函数调用计时器函数来实现倒计时功能，具体代码如下：

var countdownTimer = setInterval(countdown, 1000);

步骤三：使用jQuery3.1.1进行优化

为了使倒计时功能更加可靠和稳定，我们可以使用jQuery3.1.1对计时器函数进行进一步优化。具体操作如下：

1. 将对时间戳的计算转化为jQuery对象的data()方法操作，避免了一些判断和计算上的错误。

function countdown() {
    var $countdown = $('#countdown'),
        endTime = new Date('2022/01/01 00:00:00').getTime(),
        timeLeft = endTime - new Date().getTime();
    if (timeLeft < 0) {
        // 倒计时结束
        $countdown.html('已结束');
        clearInterval(countdownTimer);
        return;
    }
    var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)),
        hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
        minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)),
        seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
    $countdown.find('.days').text(days).data('days', days);
    $countdown.find('.hours').text(hours).data('hours', hours);
    $countdown.find('.minutes').text(minutes).data('minutes', minutes);
    $countdown.find('.seconds').text(seconds).data('seconds', seconds);
}

1. 使用data()方法来获取对应元素的数值，不用再对DOM元素进行计算，避免了一次使用Math.floor()函数。

function countdown() {
    var $countdown = $('#countdown'),
        endTime = new Date('2022/01/01 00:00:00').getTime(),
        timeLeft = endTime - new Date().getTime();
    if (timeLeft < 0) {
        // 倒计时结束
        $countdown.html('已结束');
        clearInterval(countdownTimer);
        return;
    }
    var daysLeft = $countdown.find('.days').data('days'),
        hoursLeft = $countdown.find('.hours').data('hours'),
        minutesLeft = $countdown.find('.minutes').data('minutes'),
        secondsLeft = $countdown.find('.seconds').data('seconds');
    if (secondsLeft > 0) {
        secondsLeft--;
    } else {
        secondsLeft = 59;
        if (minutesLeft > 0) {
            minutesLeft--;
        } else {
            minutesLeft = 59;
            if (hoursLeft > 0) {
                hoursLeft--;
            } else {
                hoursLeft = 23;
                if (daysLeft > 0) {
                    daysLeft--;
                } else {
                    // 倒计时结束
                    $countdown.html('已结束');
                    clearInterval(countdownTimer);
                    return;
                }
            }
        }
    }
    $countdown.find('.days').text(daysLeft).data('days', daysLeft);
    $countdown.find('.hours').text(hoursLeft).data('hours', hoursLeft);
    $countdown.find('.minutes').text(minutesLeft).data('minutes', minutesLeft);
    $countdown.find('.seconds').text(secondsLeft).data('seconds', secondsLeft);
}

以上两条优化让计时器函数的性能更好，倒计时的稳定性也更高了。

示例说明：

假设我们需要在2021年11月11日 23:59:59之前完成活动，那么倒计时模块的HTML代码如下：

<div id="countdown">
    <span class="days"></span> 天 
    <span class="hours"></span> 时 
    <span class="minutes"></span> 分 
    <span class="seconds"></span> 秒
</div>

JS代码如下：

(function() {
    var $countdown = $('#countdown');
    var endTime = new Date('2021/11/11 23:59:59').getTime();
    function countdown() {
        var nowTime = new Date().getTime(),
            timeLeft = endTime - nowTime;
        if (timeLeft < 0) {
            // 倒计时结束
            $countdown.html('已结束');
            clearInterval(countdownTimer);
            return;
        }
        var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)),
            hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
            minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)),
            seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
        $('#countdown .days').text(days);
        $('#countdown .hours').text(hours);
        $('#countdown .minutes').text(minutes);
        $('#countdown .seconds').text(seconds);
    }
    var countdownTimer = setInterval(countdown, 1000);
})();

这个示例中的倒计时模块的倒计时时间为2019年12月12日 00:00:00。