停止倒計時它reachs的確切日期

Question

我有一個倒計時，直到聖誕節後。但是，我無法在倒計時到達確切日期後停止倒計時。

function countdown(){ 
 
\t var now = new Date(); 
 
\t var eventDate = new Date(2016, 11, 25); 
 

 
\t var currentTime = now.getTime(); 
 
\t var eventTime = eventDate.getTime(); 
 

 
\t // remaining time in miliseconds 
 
\t var remTime = eventTime - currentTime; 
 

 
\t // converting into seconds, minutes, hours, days 
 
\t var s = Math.floor(remTime/1000); 
 
\t var m = Math.floor(s/60); 
 
\t var h = Math.floor(m/60); 
 
\t var d = Math.floor(h/24); 
 

 

 
\t // finding exact hours, minutes and seconds 
 
\t h %= 24; 
 
\t m %= 60; 
 
\t s %= 60; 
 

 
\t 
 
\t d = (d < 10) ? "0" + d : d; 
 
\t h = (h < 10) ? "0" + h : h; 
 
\t m = (m < 10) ? "0" + m : m; 
 
\t s = (s < 10) ? "0" + s : s; 
 

 
\t document.getElementById("days").innerHTML = d; 
 
\t document.getElementById("hours").innerHTML = h; 
 
\t document.getElementById("minutes").innerHTML = m; 
 
\t document.getElementById("seconds").innerHTML = s; 
 

 
\t setInterval(countdown, 1000); 
 
} 
 

 

 

 
countdown();

body { 
 
\t background: #1f262e; 
 
} 
 

 
.countdownContainer{ 
 
\t position: absolute;; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform : translateX(-50%) translateY(-50%); 
 
\t text-align: center; 
 
\t color: #eff0f2; 
 
\t padding: 10px; 
 
} 
 

 
.info { 
 
\t font-size: 80px; 
 
} 
 

 
#days, #hours, #minutes, #seconds { 
 
\t background: #0F1A20; 
 
\t box-shadow: 0 0 5px 3px #1f262e; 
 
\t font-size: 120px; 
 
\t padding: 20px; 
 
} 
 

 
.title { 
 
\t font-size: 20px; 
 
}

<table class="countdownContainer" cellspacing="10"> 
 

 
\t <tr class="title"> 
 
\t \t <td style="padding-bottom: 20px">DAYS</td> 
 
\t \t <td style="padding-bottom: 20px">HOURS</td> 
 
\t \t <td style="padding-bottom: 20px">MINUTES</td> 
 
\t \t <td style="padding-bottom: 20px">SECONDS</td> 
 
\t </tr> 
 

 
\t <tr class="info" > 
 
\t \t <td id="days" border-spacing="10px"></td> 
 
\t \t <td id="hours"></td> 
 
\t \t <td id="minutes"></td> 
 
\t \t <td id="seconds"></td> 
 
\t </tr> 
 
\t 
 
</table>

我看了一些例子，他們正在使用clearInterval，但我不知道我怎麼能在這裏使用它。

感謝

Answer 1

您可以使用clearInterval這樣

var myVar = setInterval(countdown, 1000); 

function myStopFunction() { 
    clearInterval(myVar); 
} 

Answer 2

嘗試使用clearTimeout。

var count; 
function countdown() { 
count = setTimeout('decrement()', 1000); 
} 

clearTimeout(count); 

Answer 3

您不檢查日期是否相等。

如果今天是想要的日期，那麼你應該停止運行的時間間隔。

間隔運行，每次你給他的第二個參數毫秒的功能，讓你的函數將運行每一秒。

var myInterval = setInterval(countdown, 1000); 

function countdown(){ 
    var now = new Date(); 
    var eventDate = new Date(2016, 11, 25); 

    var currentTime = now.getTime(); 
    var eventTime = eventDate.getTime(); 

    // if today is equal Christmas date stop everything 
    if (currentTime == eventTime) { 
     return clearInterval(myInterval); 
    } 

    // remaining time in miliseconds 
    var remTime = eventTime - currentTime; 

    // converting into seconds, minutes, hours, days 
    var s = Math.floor(remTime/1000); 
    var m = Math.floor(s/60); 
    var h = Math.floor(m/60); 
    var d = Math.floor(h/24); 


    // finding exact hours, minutes and seconds 
    h %= 24; 
    m %= 60; 
    s %= 60; 


    d = (d < 10) ? "0" + d : d; 
    h = (h < 10) ? "0" + h : h; 
    m = (m < 10) ? "0" + m : m; 
    s = (s < 10) ? "0" + s : s; 

    document.getElementById("days").innerHTML = d; 
    document.getElementById("hours").innerHTML = h; 
    document.getElementById("minutes").innerHTML = m; 
    document.getElementById("seconds").innerHTML = s; 

} 

Answer 4

這是一個簡單的問題，這裏有一些建議

1. 使用setTimeout()而不是setInterval()，因爲前者是一次性事件，而後者沒有讓你set'ed間隔會不斷積累，每增加一個都會增加直到瀏覽器被重載或崩潰？那麼IDK​​的（瀏覽器是非常聰明的，這些天），但仍然在清除巨大的混亂將需要clearInterval()個龐大的軍隊，但你記下每個setInterval()唯一標識符？哦，不....

2. 在被計算eventTime和currentTime每次調用（它們在本質上的毫秒Unix時間戳）。因此，即使前停留在整個運行一樣，你會看到1000在後者增加每次打電話，最後是後者等於/超過前者的時間，這是你停止進程的地方。

https://jsfiddle.net/oq2g7h0L/