JQuery仿小米手机抢购页面倒计时效果

下面我来详细讲解“JQuery仿小米手机抢购页面倒计时效果”的完整攻略：

前置要求

在开始实现倒计时效果之前，需要确保以下前置要求已经满足：

1. 需要引入 jQuery 库，可以通过以下链接引入：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

1. 页面元素的 HTML 结构需要正确，通常，倒计时的时分秒需要分别用三个 span 标签包裹，并设置好其对应的 id 和初始值。

<span id="countdown-hour">00</span>
<span>:</span>
<span id="countdown-minute">00</span>
<span>:</span>
<span id="countdown-second">00</span>

实现思路

倒计时效果的实现思路如下：

1. 获取倒计时结束时间跟当前时间之间的差值（单位：秒），可以通过 JavaScript 库 moment.js 方便地处理日期时间相关操作。

2. 定义一个计时器，每隔一秒更新页面显示的倒计时。

3. 在计时器的回调函数中，将剩余时间转换成时分秒的格式并更新到页面对应的元素上。

下面我们来逐步实现这个思路。

步骤一：获取倒计时剩余时间

在页面加载完成后，我们需要获取倒计时结束时间和当前时间的差值，这个差值就是倒计时的剩余时间。我们可以使用 moment.js 库方便地处理日期时间相关操作。

// 获取当前时间和倒计时结束时间之间的差值
var remainingTime = moment('2022-01-01 00:00:00').diff(moment(), 'seconds');

这里的 '2022-01-01 00:00:00' 就是我们设置的倒计时结束时间，你需要根据实际情况进行修改。

步骤二：定义计时器并更新倒计时

在计时器的回调函数中，我们需要将剩余时间转换成时分秒的格式，并更新到页面对应的元素上。

// 定义计时器
setInterval(function() {
    // 如果剩余时间为 0，清除计时器
    if (remainingTime <= 0) {
        clearInterval();
    }

    // 转换成时分秒格式
    var hours = Math.floor(remainingTime / 3600);
    var minutes = Math.floor(remainingTime % 3600 / 60);
    var seconds = Math.floor(remainingTime % 60);
    hours = hours.toString().padStart(2, '0');
    minutes = minutes.toString().padStart(2, '0');
    seconds = seconds.toString().padStart(2, '0');

    // 更新页面倒计时
    $('#countdown-hour').text(hours);
    $('#countdown-minute').text(minutes);
    $('#countdown-second').text(seconds);

    // 减去一秒
    remainingTime--;
}, 1000);

这里注意，需要使用 clearInterval() 函数在剩余时间为 0 时清除计时器，否则页面倒计时会一直持续更新。

另外，我们将剩余时间转换成时分秒格式之前，需要先将剩余秒数转换为小时、分钟、秒三个单位，这个操作可以使用求余运算符（%）实现。

示例一：倒计时结束后的提醒

如果在倒计时结束后需要给用户一个提醒，可以在计时器的回调函数中加入判断逻辑。

setInterval(function() {
    // 如果剩余时间为 0，清除计时器并提醒用户
    if (remainingTime <= 0) {
        clearInterval();
        alert('抢购已经结束，谢谢参与！');
        return;
    }

    // ...
}, 1000);

示例二：在页面加载完成后自动开始倒计时

在页面加载完成后，我们可以自动开始倒计时。可以通过在 $(document).ready() 函数中执行计时器的初始化操作实现。

$(document).ready(function() {
    // 获取倒计时剩余时间
    var remainingTime = moment('2022-01-01 00:00:00').diff(moment(), 'seconds');

    // 定义计时器
    setInterval(function() {
        // 如果剩余时间为 0，清除计时器并提醒用户
        if (remainingTime <= 0) {
            clearInterval();
            alert('抢购已经结束，谢谢参与！');
            return;
        }

        // 转换成时分秒格式
        var hours = Math.floor(remainingTime / 3600);
        var minutes = Math.floor(remainingTime % 3600 / 60);
        var seconds = Math.floor(remainingTime % 60);
        hours = hours.toString().padStart(2, '0');
        minutes = minutes.toString().padStart(2, '0');
        seconds = seconds.toString().padStart(2, '0');

        // 更新页面倒计时
        $('#countdown-hour').text(hours);
        $('#countdown-minute').text(minutes);
        $('#countdown-second').text(seconds);

        // 减去一秒
        remainingTime--;
    }, 1000);
});

在以上示例中，我们使用了 $(document).ready() 函数，在页面加载完成后执行了倒计时效果的初始化操作。