停止倒计时它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/