活动秒杀Demo

最新推荐文章于 2022-07-31 19:26:21 发布

格格巫仙女

最新推荐文章于 2022-07-31 19:26:21 发布

阅读量247

点赞数 1

文章标签：活动秒杀

本文链接：https://blog.csdn.net/weixin_42340514/article/details/94025219

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../../../../../../Desktop/work/jquery-1.10.2.min.js"></script>

</head>

<body>
<div id="activity">
    <div>
        <span class="time-content"></span>
        <span class="botHours"></span>时
        <span class="botMIn"></span>分
        <span class="botSecond"></span>秒
    </div>
</div>
</body>

</html>
<script>
        var NowTime ='2019/06/30 22:00:00';//当前时间
        NowTime=new Date(NowTime).getTime();
        fn()
        function fn() {
            var timer = setInterval(function() {
                console.log(NowTime)
                NowTime+=1000;
                var StartTime = '2019/06/30 22:01:00';//活动开始时间
                StartTime = new Date(StartTime).getTime();
                var tw = '2019/06/30 22:02:00';//活动结束时间
                tw = new Date(tw).getTime();
                var EndTime = '';
                console.log(NowTime)
                if(NowTime < StartTime) {
                    //未开始
                    EndTime = StartTime;
                    $('#stopNow').css('display', 'none');
                    $('#startNow').css('display', 'none');
                    $('#noStart').css('display', 'block');
                    $(".time-content").html("距离活动开始")
                } else if(NowTime < tw && NowTime>=StartTime) {
                    //已开始
                    EndTime = tw;
                    $('#stopNow').css('display', 'none');
                    $('#startNow').css('display', 'none');
                    $('#noStart').css('display', 'block');
                    $(".time-content").html("距离活动结束剩余")
                }else if(NowTime >= tw){
                    //已结束
                    $('#activity').hide()
                    clearInterval(timer);
                }
                console.log(NowTime)
                console.log(EndTime)
                var t = EndTime - NowTime;
                console.log(t)
                var d = 0;
                var h = 0;
                var m = 0;
                var s = 0;
                if(t >= 0) {
                    console.log(t)
                    d = Math.floor((t / 1000 / 3600) / 24);
                    h = Math.floor((t / 1000 / 3600) % 24);
                    m = Math.floor((t / 1000 / 60) % 60);
                    s = Math.floor(t / 1000 % 60);
                    console.log(s)
                    if(d < 10) {
                        d = "0" + d;
                    }
                    if(h < 10) {
                        h = "0" + h;
                    }
                    if(m < 10) {
                        m = "0" + m;
                    }
                    if(s < 10) {
                        s = "0" + s;
                    }
                    $('.botHours').html(h);
                    $('.botMIn').html(m);
                    $('.botSecond').html(s);
                }
            }, 1000)
        }
</script>

//当前时间的同步问题，需要从服务器获取当前时间，然后再本地定时器++。本地获取的是设备时间

//new Date(tw).getTime();设备ios和安卓兼容问题 ios不支持2019-06-30 22:02:00，需要转化成2019/06/30 22:02:00

转化 NowTime = new Date(NowTime.replace(/-/g, '/')).getTime()

//页面定时器过多时，容易出现定时器显示混乱

解决方式：1，保证每个商品标签不重复，避免定时器动态修改覆盖 2，页面内点击更新数据时之前，要清空页面内所以的定时器

每次创建定时器就把定时器放在数组中，然后循环清空定时器

格格巫仙女

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
活动秒杀Demo

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script src="../../../../../../Desktop/work/jquery-1.10.2.min.js"></scri...
复制链接

扫一扫