js精准的倒计时函数分享

下面我将为你详细讲解“JS 精准的倒计时函数分享”的完整攻略。

简介

在网站中，倒计时是一个非常常见的功能，比如购物网站中的秒杀倒计时、新年倒计时等等。JS 精准的倒计时函数可以用来方便地实现这些功能，本文将介绍如何实现该函数。

准备工作

首先，我们需要准备一个用来显示倒计时的元素以及倒计时结束后需要执行的操作。比如要实现新年倒计时，我们需要准备一个显示时间的元素和一个提示新年到来的操作。

HTML

<div id="countdown"></div>

JS：

// 定义倒计时结束的操作
function countdownEnd(){
    alert('Happy New Year!');
}

编写倒计时函数

接下来，我们需要编写 JS 精准的倒计时函数。该函数通过 setInterval() 方法来实现定时器，并通过计算时间差来得到剩余时间。

// 倒计时函数
function countdown(){
    // 目标日期
    var targetDate = new Date('2022/01/01');

    // 每秒执行一次
    var interval = setInterval(function(){
        // 当前日期
        var now = new Date();

        // 计算时间差
        var diff = targetDate - now;

        // 时间差小于等于0，倒计时结束
        if(diff <= 0){
            clearInterval(interval);
            countdownEnd();
            return;
        }

        // 计算天、小时、分、秒
        var days = Math.floor(diff / (1000 * 60 * 60 * 24));
        var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        var secs = Math.floor((diff % (1000 * 60)) / 1000);

        // 将时间显示在页面上
        document.getElementById('countdown').innerHTML = days + '天 ' + hours + '小时 ' + mins + '分 ' + secs + '秒';
    }, 1000);
}

调用倒计时函数

最后，我们需要调用倒计时函数来开始倒计时。在本例中，我们可以在页面加载完成后调用倒计时函数。

// 页面加载完成后执行
window.onload = function(){
    countdown();
}

到这里，我们已经完成了 JS 精准的倒计时函数的编写和调用。下面，我将给出两条示例说明：

示例1：秒杀倒计时

在秒杀时间到达之前，我们需要展示剩余的时间；而在秒杀时间到达之后，我们需要执行相应的操作。下面是一个示例：

HTML：

<div id="countdown"></div>

JS：

// 定义秒杀结束的操作
function countdownEnd(){
    document.getElementById('countdown').innerHTML = '秒杀已结束';
}

// 倒计时函数
function countdown(){
    // 目标日期
    var targetDate = new Date('2022/01/01 10:00:00');

    // 每秒执行一次
    var interval = setInterval(function(){
        // 当前日期
        var now = new Date();

        // 计算时间差
        var diff = targetDate - now;

        // 时间差小于等于0，秒杀结束
        if(diff <= 0){
            clearInterval(interval);
            countdownEnd();
            return;
        }

        // 计算天、小时、分、秒
        var hours = Math.floor(diff / (1000 * 60 * 60));
        var mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        var secs = Math.floor((diff % (1000 * 60)) / 1000);

        // 将时间显示在页面上
        document.getElementById('countdown').innerHTML = '剩余时间：' + hours + '小时 ' + mins + '分 ' + secs + '秒';
    }, 1000);
}

// 页面加载完成后执行
window.onload = function(){
    countdown();
}

示例2：新年倒计时

在本例中，我们需要在新年到来之前展示剩余的时间，而在新年到来之后，我们需要执行相应的操作。下面是一个示例：

HTML：

<div id="countdown"></div>

JS：

// 定义新年结束的操作
function countdownEnd(){
    document.getElementById('countdown').innerHTML = '新年已到来';
}

// 倒计时函数
function countdown(){
    // 目标日期
    var targetDate = new Date('2022/01/01');

    // 每秒执行一次
    var interval = setInterval(function(){
        // 当前日期
        var now = new Date();

        // 计算时间差
        var diff = targetDate - now;

        // 时间差小于等于0，新年到来
        if(diff <= 0){
            clearInterval(interval);
            countdownEnd();
            return;
        }

        // 计算天、小时、分、秒
        var days = Math.floor(diff / (1000 * 60 * 60 * 24));
        var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        var secs = Math.floor((diff % (1000 * 60)) / 1000);

        // 将时间显示在页面上
        document.getElementById('countdown').innerHTML = '距离新年还有：' + days + '天 ' + hours + '小时 ' + mins + '分 ' + secs + '秒';
    }, 1000);
}

// 页面加载完成后执行
window.onload = function(){
    countdown();
}

以上就是 JS 精准的倒计时函数的完整攻略。