页面多个setInterval

本是古典何须时尚 2022-06-17 05:43 142阅读 0赞

# 页面多个setInterval #

## 业务需求 ##

![这里写图片描述][SouthEast]

## 代码实现 ##

### 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>分
                        
                    </button>
                </div>
            </div>
    <div class="footer clearfix">
        下一堂直播倒计时：
        <span class="day">00</span>天
        <span class="hour">00</span>时
        <span class="minute">00</span>分
        
    </div>

### js代码 ###

#### 倒计时函数： ####

#### 设置时间： ####

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][js]

[SouthEast]: /images/20220617/01c330b43c7b47b98966a2345e524fcf.png
[js]: http://blog.csdn.net/baicp3/article/details/22609215