定時器加時間戳實現當前時間是否處於某個時間內
阿新 • • 發佈:2018-12-16
要做一個直播課程的效果,如果當前時間為直播開始以及之後的一個小時內,顯示為正在直播,如果直播結束,歸為往期課程
需要獲取到當前客戶端的時間,轉換為時間戳,加一個定時器,和當前設定的時間進行比較,實現實時的比較。直播結束後,清除定時器。
分別分三種狀態,
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();