定时器加时间戳实现当前时间是否处于某个时间内

最新推荐文章于 2025-03-13 18:00:00 发布

菲一菲

最新推荐文章于 2025-03-13 18:00:00 发布

阅读量594

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_37203608/article/details/83150187

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种基于客户端时间的直播课程状态实时更新机制，通过比较当前时间与设定的直播时间，实现直播中、未开始及往期课程的状态显示。使用定时器每秒更新状态，确保直播状态的准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要做一个直播课程的效果，如果当前时间为直播开始以及之后的一个小时内，显示为正在直播，如果直播结束，归为往期课程

需要获取到当前客户端的时间，转换为时间戳，加一个定时器，和当前设置的时间进行比较，实现实时的比较。直播结束后，清除定时器。

分别分三种状态，

1.在直播开始和一个小时之内，显示直播中。

2.当前时间小于设置的时间，显示未开始

3.大于当前时间，归入往期课程。

用data-timeRang存储时间。

html部分：

<li class="live__item clearfix mb60" data-timeRang="2018-10-18 20:00:00">
                        <div class="live_time fl">
                            <h6 class="live__title"><span class="live__state--icon"></span>开课时间：</h6>
                            <p class="time__wrap"><span class="live__date">10月18日</span><span class="live__hour">20:00</span></p>
                            <p class="live__state">正在直播中</p>
                        </div>
                    </li>
                    <li class="live__item clearfix mb60" data-timeRang="2018-10-23 20:00:00">
                        <div class="live_time fl">
                            <h6 class="live__title"><span class="live__state--icon live__notstart"></span>开课时间：</h6>
                            <p class="time__wrap"><span class="live__date">10月23日</span><span class="live__hour">20:00</span></p>
                            <p class="live__state"></p>
                        </div>

                    </li>

js部分：

    //直播状态
    function test() {
        var timer = setInterval(function () {
            //获取客户端电脑当前时间戳，精确到毫秒
            var nowTime = parseInt(new Date().getTime());

            var timeList = $('.live__item');
            for (var i = 0; i < timeList.length; i++) {
                var ti = $(timeList[i]).attr('data-timeRang');
                var startTime = date2TimeStamp(ti);
                //结束时间，开始时间往后推1个小时，时间戳加上：60*60*1000 毫秒
                var endTime = startTime + 3600000;
                //判断当前时间在开始时间和开始时间之后一个小时内
                if (nowTime >= startTime && nowTime <= endTime) {
                    //alert('正在直播中...');
                    $(timeList).eq(i).addClass('active').siblings().removeClass('active');
                } else if (nowTime < startTime) {
                    //alert('直播未开始...');
                } else {
                    //alert('直播已结束...');
                    $(".finish__wrap").prepend($(timeList).eq(i));
                     clearInterval(timer);
                 }
            }
        }, 1000);
    }

    /**
    * 将时间格式转成时间戳，精确到毫秒（13位）
    */
    function date2TimeStamp(strTime) {
        var date = new Date(strTime.replace(/-/g, '/'));
        return date.getTime();
    }

    test();