页面多个setInterval

最新推荐文章于 2023-11-30 16:55:10 发布

ziazan

最新推荐文章于 2023-11-30 16:55:10 发布

阅读量3.2k

点赞数

分类专栏： javascript 代码笔记文章标签：倒计时 js

本文链接：https://blog.csdn.net/FengNext/article/details/70229826

版权

javascript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

代码笔记

2 篇文章 0 订阅

订阅专栏

页面多个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>');
            })
        })
    });