无法清除间隔

Question

我是新来的，也是 Javascript 的。 我正在创建一个计时器，它将显示从特定日期和时间离开的天数、小时数、分钟数、秒数。 我成功地对此进行了编程，但这是一个我无法解决的问题。 当到达特定的日期和时间时，计时器显示还剩 0 天 0 小时 0 分钟 0 秒。但就在那之后，这些值变成了负数。我不想显示负值，这就是为什么我使用 clearInterval 停止每秒更新 DOM 但它不起作用的原因。这是我的代码...

function init()
{
.
.
.
var timeCalc = setInterval(timeRemainingCalc, 1000);
}
    
    var launchTime = new Date("05/28/2015 00:56:00").getTime(); //here goes a particular date and time
    
    function timeRemainingCalc() {
        var currentTime = new Date(); //this gets client's date and time
        var daysleft = Math.floor(((launchTime - currentTime.getTime()) / 1000) / 86400);
        var hoursleft = Math.floor(((launchTime - currentTime.getTime()) / 1000) / 3600) - daysleft * 24;
        var minutesleft = Math.floor(((launchTime - currentTime.getTime()) / 1000) / 60) - daysleft * 24 * 60 - hoursleft * 60;
        var secondsleft = Math.floor((launchTime - currentTime.getTime()) / 1000) - daysleft * 24 * 60 * 60 - hoursleft * 60 * 60 - minutesleft * 60;
        if (daysleft <= 0 && hoursleft <= 0 && minutesleft <= 0 && secondsleft <= 0) //checks if the particular time has already been reached or not? i.e. negative value
        {
            clearInterval(timeCalc); //this one is not working...
        } else //code inside this only updates 1st and 2nd digit of days, hours, etc of the timer
        {
            document.getElementById('Days0').innerHTML = Math.floor(daysleft / 10);
            document.getElementById('Days1').innerHTML = daysleft - Math.floor(daysleft / 10) * 10;
            document.getElementById('Hours0').innerHTML = Math.floor(hoursleft / 10);
            document.getElementById('Hours1').innerHTML = hoursleft - Math.floor(hoursleft / 10) * 10;
            document.getElementById('Minutes0').innerHTML = Math.floor(minutesleft / 10);
            document.getElementById('Minutes1').innerHTML = minutesleft - Math.floor(minutesleft / 10) * 10;
            document.getElementById('Seconds0').innerHTML = Math.floor(secondsleft / 10);
            document.getElementById('Seconds1').innerHTML = secondsleft - Math.floor(secondsleft / 10) * 10;
        }
    }

我认为这里不需要 HTML 代码和 CSS 代码。如果需要，请告诉我，我也会上传它们。

谢谢。

Answer 1

您正在另一个函数范围内定义 timecalc。您无法访问该变量。

最简单的解决方案：做一个

var timeCalc;
function init()
{    ...
     timeCalc = setInterval(timeRemainingCalc, 1000);
}

让 timeCalc 全局可用。

Answer 2

好吧，你的代码永远不会调用clearInterval，除非时间正好是launchTime。

摆弄这个修改后版本的launchTime 值，你会看到：

var timeCalc = setInterval(timeRemainingCalc, 1000);

var launchTime = new Date("01/01/2015 00:01:00").getTime(); //here goes a particular date and time

function timeRemainingCalc() {
    var currentTime = new Date(); //this gets client's date and time
    var daysleft = Math.floor(((launchTime - currentTime.getTime()) / 1000) / 86400);
    var hoursleft = Math.floor(((launchTime - currentTime.getTime()) / 1000) / 3600) - daysleft * 24;
    var minutesleft = Math.floor(((launchTime - currentTime.getTime()) / 1000) / 60) - daysleft * 24 * 60 - hoursleft * 60;
    var secondsleft = Math.floor((launchTime - currentTime.getTime()) / 1000) - daysleft * 24 * 60 * 60 - hoursleft * 60 * 60 - minutesleft * 60;

    if (daysleft <= 0 && hoursleft <= 0 && minutesleft <= 0 && secondsleft <= 0) //checks if the particular time has already been reached or not? i.e. negative value
    {
        console.log("Clear!");
        clearInterval(timeCalc); //this one is not working...
    } else //code inside this only updates 1st and 2nd digit of days, hours, etc of the timer
    {
        console.log("daysleft: " + daysleft);
        console.log("hoursleft: " + hoursleft);
        console.log("minutesleft: " + minutesleft);
        console.log("secondsleft: " + secondsleft);
        console.log("");
    }
}

jsFiddle - https://jsfiddle.net/o991pkxa/

您应该检查days/hours/minutes/secondsleft 中的任何 个变量是否为负数，而不是所有 个变量是否为负数。