页面多个setInterval

页面多个setInterval

业务需求

这里写图片描述

代码实现

html代码

<div>
                <button class="zbBtn" id="live01" data-livetime="2017/04/21 19:30:00" data-liveend="2017/04/21 20:30:00"><span class="zbicon icon-sj"></span> 倒计时:
                    <span class="day">3</span><span class="hour">02</span><span class="minute">54</span><!--<span class="second">00</span>秒-->
                </button>
            </div>
        </div>
<div class="footer clearfix">
    下一堂直播倒计时:
    <span class="day">00</span><span class="hour">00</span><span class="minute">00</span><!--<button>进入直播</button>-->
</div>

js代码

倒计时函数:
function countDown(item,callback,endFun) {
        var timer = null;
        var time = $(item).attr('data-liveTime');
        var end_time = new Date(time).getTime();//月份是实际月份-1
        var sys_second = (end_time - new Date().getTime()) / 1000;
        function doCount() {
            var data ={};
            if (sys_second > 1) {
                sys_second -= 1;
                data.day = Math.floor((sys_second / 3600) / 24);
                data.hour = Math.floor((sys_second / 3600) % 24);
                data.minute = Math.floor((sys_second / 60) % 60);
                data.second = Math.floor(sys_second % 60);
                callback.call(item,data);
            } else {
                clearInterval(timer);
                if (endFun) endFun();
            }
        }
        timer = setInterval(doCount,1000);
        doCount();
    }
设置时间:
    function setTime(d){
        var _this = $(this);
        _this.find('.day').text(d.day);//计算天
        _this.find('.hour').text(d.hour < 10 ? "0" + d.hour : d.hour);//计算小时
        _this.find('.minute').text(d.minute < 10 ? "0" + d.minute : d.minute);//计算分钟
//                _this.find('.second').text(d.second < 10 ? "0" + d.second : d.second);//计算秒
    }
函数调用
$(function(){
        var currentLive = $('.zbBtn').eq(0);//页脚显示下一堂直播的倒计时
        $('.footer').attr('data-liveTime',$(currentLive).attr('data-liveTime'));//设置页脚倒计时
        $('.zbBtn').each(function(index, item){
            countDown.call(item,item,setTime,function(){//开始倒计时
                var endTime = $(item).attr('data-liveEnd');//获取直播结束的时间
                var end_live_time = new Date(endTime).getTime();
                var deta = (end_live_time - new Date().getTime()) / 1000;
                if(deta >=0){// 倒计时结束,直播开始
                    $(item).empty();
                    $(item).append('<span>正在直播</span>');
                }else{//直播结束
                    $(item).empty();
                    $(item).append('<span>直播结束</span>');
                    if(index == 0){//第一场直播结束,currenLive 为第二场直播
                        currentLive = $('.zbBtn').eq(1);
                        $('.footer').attr('data-liveTime',$(currentLive).attr('data-liveTime'));//更新页脚倒计时,为第二场直播的倒计时
                    }
                    if(index == 1){
                        $('.footer').remove();//两场直播都结束了,页脚移除
                    }
                }
            })
        });
        $('.footer').each(function(index, item){
            countDown.call(item,item,setTime,function(){
                $(item).empty();
                $(item).append('<button>进入直播</button>');
            })
        })
    });

参考链接:一个页面多个倒计时 js

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值