利用js代码实现倒计时

2019-07-06 14:43:41 阅读：237 来源： 互联网

标签：hours 10 seconds 代码 js 倒计时 html difference minutes

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

<!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>

标签：hours,10,seconds,代码,js,倒计时,html,difference,minutes
来源： https://blog.csdn.net/qq_41445106/article/details/94855606

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

利用js代码实现倒计时