实现倒计时效果

版权声明：转载来源 《张益达的博客》 https://blog.csdn.net/weixin_44538399 https://blog.csdn.net/weixin_44538399/article/details/87893355

实现倒计时效果

我们经常能在购物网站上看到“距活动开始还剩：03天12小时45分17秒”这种倒计时的效果，那么他是怎么实现的呢？

我们可以使用计时器和Math()计算总秒数来实现

function timer(intDiff, id) {
    intDiff = parseInt(intDiff);//倒计时总秒数
    window.setInterval(function () {
        var day = 0,hour = 0,minute = 0,second = 0; //时间默认值
        if (intDiff > 0) {
            day = Math.floor(intDiff / (60 * 60 * 24));//天数
            hour = Math.floor(intDiff / (60 * 60)) - (day * 24);//小时
            minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);//分钟
            second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);//秒
        }
        if (minute <= 9) minute = '0' + minute;
        if (second <= 9) second = '0' + second;
         $('#' + id).html('距开售时间还剩：<span class="CountNum"><span class="BackNum">' + day
         + '</span>天<span class="BackNum">' + hour + '</span>小时<span class="BackNum">'
         + minute + '</span>分<span class="BackNum">' + second + '</span>秒' + '</span>');
         // 拼接完整的倒计时
        intDiff--;
    }, 1000);
}

这里Math.floor()方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数。

例如倒计时总秒数是97207s，天数的计算方法是将秒数转化为天数，97207/（60*60*24）=1.1250810….

使用Math.floor()得到的结果为1

而小时的计算方法则是将97207转化为小时97207/(60*60)，再减去已得到的天数1*(24)。然后以此类推

计算出所有的天数、时、分、秒，再进行拼接。

然后用计时器setInterval()，使总秒数递减，每秒执行一次。

调用方法timer(倒计时总秒数，显示倒计时标签的id)。

 timer(259200, "Cat");//60*60*24*3     3天
 timer(604800, "Squirrel");//60*60*24*7      7天