當時間已過去時，jQuery Timer不會清除間隔

Question

這是我的jQuery倒數計時器。它顯示直到特定日期的時間。沒有達到截止日期時一切正常。但是，如果頁面處於活動狀態時達到最終期限，則在所有字段days,hours,minutes,seconds中顯示零。但是，當用戶在最後期限結束後加載頁面時，它會將時間顯示爲負值。在這種情況下，我想在所有部分顯示零。我在下面附上我的代碼，請幫忙。

var getRemainderTime = function(finishtime) 
{ 
    var t = Date.parse(finishtime) - Date.parse(new Date()); 
    var seconds = Math.floor((t/1000) % 60); 
    var minutes = Math.floor((t/1000/60) % 60); 
    var hours = Math.floor((t/(1000 * 60 * 60)) % 24); 
    var days = Math.floor(t/(1000 * 60 * 60 * 24)); 
    return { 
    'total': t, 
    'days': days, 
    'hours': hours, 
    'minutes': minutes, 
    'seconds': seconds 
    }; 
}; 

var initializeClock = function(finishtime) 
{ 

var updateClock = function() 
{ 
    var t = getRemainderTime(finishtime); 

    $("#clockdiv .days").html(t.days); 
    $("#clockdiv .hours").html(('0' + t.hours).slice(-2)); 
    $("#clockdiv .minutes").html(('0' + t.minutes).slice(-2)); 
    $("#clockdiv .seconds").html(('0' + t.seconds).slice(-2)); 

    if (t.total <= 0) { 
    clearInterval(timeinterval); 
    } 
}; 

updateClock(); 
var timeinterval = setInterval(updateClock, 1000); 
}; 
var deadline = 'October 30 2016 23:59:59 GMT-0400'; 

我以爲我的t.total不工作，但它似乎工作正常。請幫我解決這個問題。

Answer 1

您只需添加一個條件並返回0，如果時間已過。

var getRemainderTime = function(finishtime) 
 
{ 
 
    var t = Date.parse(finishtime) - Date.parse(new Date()); 
 
    if (t >= 0 ) { 
 
    
 
    var seconds = Math.floor((t/1000) % 60); 
 
    var minutes = Math.floor((t/1000/60) % 60); 
 
    var hours = Math.floor((t/(1000 * 60 * 60)) % 24); 
 
    var days = Math.floor(t/(1000 * 60 * 60 * 24)); 
 
    return { 
 
    'total': t, 
 
    'days': days, 
 
    'hours': hours, 
 
    'minutes': minutes, 
 
    'seconds': seconds 
 
    }; 
 
    } 
 
    else { 
 
    return { 
 
    'total': 0, 
 
    'days': 0, 
 
    'hours': 0, 
 
    'minutes': 0, 
 
    'seconds': 0 
 
    }; 
 
    } 
 
    
 
}; 
 

 
var initializeClock = function(finishtime) 
 
{ 
 

 
var updateClock = function() 
 
{ 
 
    var t = getRemainderTime(finishtime); 
 

 
    $("#clockdiv .days").html(t.days); 
 
    $("#clockdiv .hours").html(('0' + t.hours).slice(-2)); 
 
    $("#clockdiv .minutes").html(('0' + t.minutes).slice(-2)); 
 
    $("#clockdiv .seconds").html(('0' + t.seconds).slice(-2)); 
 

 
    if (t.total <= 0) { 
 
    clearInterval(timeinterval); 
 
    } 
 
}; 
 

 
updateClock(); 
 
var timeinterval = setInterval(updateClock, 1000); 
 
}; 
 

 
document.getElementById('startCountDown').onclick= function() { 
 
$('#clockdiv').show(); initializeClock(document.getElementById('finishtime').value); 
 
}

#finishtime { 
 
    width: 300px; 
 
} 
 
#clockdiv { 
 
    display: none; 
 
} 
 
#startCountDown { 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div> 
 
Please set the deadline: <input id="finishtime" type="text" value="September 26 2016 07:48:15 GMT+0530"> 
 
<button id="startCountDown"> Start Countdown</button> 
 
</div> 
 
<div id="clockdiv"> 
 
    <span class="days"></span> days&nbsp;, 
 
    <span class="hours"></span>hours :&nbsp; 
 
    <span class="minutes"></span>mins :&nbsp; 
 
    <span class="seconds"></span>seconds 
 
</div>