H5活动开始/结束倒计时实现

最新推荐文章于 2021-06-27 11:16:49 发布

caicai1171523597

最新推荐文章于 2021-06-27 11:16:49 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/caicai1171523597/article/details/106730057

版权

最近在做一个活动页，根据后台返回的活动开始时间、结束时间判断当前活动的状态以及实现倒计时
效果，上一篇文章有记录ios倒计时踩坑，这里记录下倒计时效果实现。

倒计时效果

js:

        /**获取现在的时间*/
        var nowTime = new Date().getTime();
        /**活动开始时间*/
        var startT = '2020-05-20 10:00:00'.replace(/-/g, "/");
        var startTime = new Date(startT).getTime();
        /**活动结束时间*/
        var endT = '2020-05-22 10:00:00'.replace(/-/g, "/");
        var endTime = new Date(endT).getTime();
        var timeDiff;
        var remark = "距离活动";
        if (startTime >= nowTime) {
            /**活动未开始*/
            timeDiff = (startTime - nowTime) / 1000;
            remark += "开始";

        } else if (startTime < nowTime && nowTime <= endTime) {
             /**活动已开始未结束*/
            timeDiff = (endTime - nowTime) / 1000;
            remark += "结束";
        } else if (nowTime > endTime) {
             /**活动已结束*/
            remark = "活动已结束";
        }
        if (timeDiff > 0) {
            setUpTimer(timeDiff);
        }

        /**定时器*/
        var t;
        function setUpTimer(time) {
            t = setInterval(function () {
                time--
                formatSeconds(time)
                if (time <= 0) {
                    clearInterval(t)
                }
            }, 1000)
        }
        /**小于10的数字前加0*/
        function formatBit(val) {
            /*转变为数字类型*/
            val = +val
            return val > 9 ? "<span>" + val + "</span>" : "<span>0" + val + "</span>"
        }
        /**根据时差计算剩余时分秒*/
        function formatSeconds(time) {
            if (time < 0) {
                time = 0;
            }
            var min = Math.floor(time % 3600)
            var val = formatBit(Math.floor(time / 3600)) + ':' + formatBit(Math.floor(min / 60)) + ':' + formatBit(Math.floor(time % 60))
            document.getElementsByClassName("clock-s")[0].innerHTML = remark + val;
        }

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>倒计时开始</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .clock-s {
            margin: 50px;
            text-align: center
        }
        .clock-s span {
            padding: 10px 5px;
            margin-left: 5px;
            background-color: #dcdcdc;
            border-radius: 4px;
        }
    </style>
</head>

<body>
    <div class="clock-s">
        <span>00</span>:<span>00</span>:<span>00</span>
    </div>
</body>
</html>

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe

caicai1171523597

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
H5活动开始/结束倒计时实现

最近在做一个活动页，根据后台返回的活动开始时间、结束时间判断当前活动的状态以及实现倒计时效果，上一篇文章有记录ios倒计时踩坑，这里记录下倒计时效果实现。倒计时效果js: /**获取现在的时间*/ var nowTime = new Date().getTime(); /**活动开始时间*/ var startT ...
复制链接

扫一扫