時間が経過するとjQueryタイマーがクリアされません

Question

これはjQueryのカウントダウンタイマーです。特定の日付まで残った時間を表示します。締め切りに達していないときはすべてうまく動作します。ただし、ページがアクティブなときに期限に達すると、すべてのフィールドに0が表示されます。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

条件を満たす場合は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>