利用js代码实现倒计时

在做购物网站时我们时常会用到倒计时来计算活动结束的时间,今天就和大家分享一下倒计时的实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="count-time">
        <span class="tis1"></span>
        <span class="tis2">天</span>
        <span class="tis3"></span>
        <span class="tis4">时</span>
        <span class="tis5"></span>
        <span class="tis6">分</span>
        <span class="tis7"></span>
        <span class="tis8">秒</span>
    </div>
    <script src="jquery-1.11.3.min.js"></script>
    <script>
        window.setInterval(function () {
            $(".count-time").countDown('2019/07/10 24:00:00');
        }, 1000);
        ; (function ($) {
            $.fn.extend({
                countDown: function (endTime) {
                    //取设定的活动结束时间距1970年1月1日之间的毫秒数
                    var end = new Date(endTime).getTime();
                    //取当前时间距1970年1月1日之间的毫秒数
                    var nowTime = new Date().getTime();
                    //结束时间与当前时间之间的毫秒差
                    var difference = end - nowTime;
                    if (difference > 0) {
                        //将毫秒差换算成天数
                        days = Math.floor(difference / 86400000);
                        difference = difference - days * 86400000;
                        //换算成小时
                        hours = Math.floor(difference / 3600000);
                        difference = difference - hours * 3600000;
                        //换算成分钟
                        minutes = Math.floor(difference / 60000);
                        difference = difference - minutes * 60000;
                        //换算成秒数
                        seconds = Math.floor(difference / 1000);
                        //不足10时,进行补零操作
                        if (hours < 10) {
                            hours = "0" + hours;
                        };
                        if (minutes < 10) {
                            minutes = "0" + minutes;
                        };
                        if (seconds < 10) {
                            seconds = "0" + seconds;
                        };
                        $(".tis1").html(days);
                        $(".tis3").html(hours);
                        $(".tis5").html(minutes);
                        $(".tis7").html(seconds);
                    } else {
                        //设定若是过了设置的活动结束时间,全部写成0天0时0分0秒
                        $(".tis1").html(0);
                        $(".tis3").html(0);
                        $(".tis5").html(0);
                        $(".tis7").html(0);
                    }
                }
            })
        })(jQuery);

    </script>
</body>

</html>
上一篇:035、容器间通信的三种方式(2019-02-22 周五)


下一篇:行业看点 | IBM与三星等12家公司联手,量子计算机领域竞争激烈