利用js代码实现倒计时

最新推荐文章于 2023-11-14 10:56:21 发布

浅浅呐

最新推荐文章于 2023-11-14 10:56:21 发布

阅读量479

点赞数 2

分类专栏：前端文章标签：前端 js 倒计时

本文链接：https://blog.csdn.net/qq_41445106/article/details/94855606

版权

前端专栏收录该内容

80 篇文章 1 订阅

订阅专栏

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

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

浅浅呐

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用js代码实现倒计时

在做购物网站时我们时常会用到倒计时来计算活动结束的时间，今天就和大家分享一下倒计时的实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...
复制链接

扫一扫