代码之家 › 专栏 › 技术社区 › user9317722

记分板上的Javascript计时器在0后变为-1

setinterval jquery javascript

user9317722 · 技术社区 · 6 年前

我似乎在记分板上发现了一个小问题。例如,如果我将它设置为1分钟(1:00),它将执行1:0-1,然后执行0:59。我不太明白为什么会这样,下面是我的代码:

var minutes = 0;
var c = 0;
var secondes = 0;
var commence = setInterval(commencer, 1000);
clearInterval(commence);

function commencer(){  
    secondes -= 1;
    document.getElementById('temps').innerHTML = minutes + ":" + secondes;
        if (secondes < 10) {
            document.getElementById('temps').innerHTML = minutes + ":" + c + secondes;
        }    
        if (secondes <= 0) {
            secondes = 60;
            minutes = minutes - 1;
            if (minutes < 0) {
                clearInterval(commence);
                minutes = 0;
                secondes = 0;
                clique = 0;
            }
        }    
}

2 回复 | 直到 6 年前

Lightness Races in Orbit Shash316 6 年前

因为这就是你告诉它的。

您以1分0秒开始(实际上您没有,但假设您的代码已更改以匹配您的问题)。
然后减去1秒,得到1分1秒
您将此内容写入HTML
然后您执行了算术来处理下溢,得到0分59秒
一秒钟后,重复

改变顺序,它会像您预期的那样工作:

// Changed minutes from 0 to 1
var minutes = 1;
var c = 0;
var secondes = 0;
var commence = setInterval(commencer, 1000);

// Removed "clearInterval" call that stops the
// whole thing from running

function commencer() {
    secondes -= 1;
    
    // This has moved up
    if (secondes <= 0) {
        secondes = 60;
        minutes = minutes - 1;
        if (minutes < 0) {
            clearInterval(commence);
            minutes = 0;
            secondes = 0;
            clique = 0;
        }
    }
    
    // This has moved down
    document.getElementById('temps').innerHTML = minutes + ":" + secondes;
    if (secondes < 10) {
       document.getElementById('temps').innerHTML = minutes + ":" + c + secondes;
    }    
}

<span id="temps"></span>

您的新问题是,底流检查器将秒数设置为60,因此您最终会 0:60 . 我怀疑这是你的本意。

我现在会改变 if (secondes <= 0) 到 if (secondes < 0) 和更改 secondes = 60 到 secondes = 59 ,虽然我还没有证实这是正确的;我把它作为练习留给你。

ferdousulhaque 6 年前

您可以为1分钟计时器添加以下代码,它还将在倒计时时填充0。只需放置div id=clockdiv,添加几秒钟和几分钟的类,它就会正确显示出来。

function getTimeRemaining(endtime) {
    var t = Date.parse(endtime) - Date.parse(new Date());
    var seconds = Math.floor((t / 1000) % 60);
    var minutes = Math.floor((t / 1000 / 60) % 60);
    return {
        'total': t,
        'minutes': minutes,
        'seconds': seconds
    };
}

function initializeClock(id, endtime) {
    var clock = document.getElementById(id);
    var minutesSpan = clock.querySelector('.minutes');
    var secondsSpan = clock.querySelector('.seconds');

    function updateClock() {
        var t = getTimeRemaining(endtime);

        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

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

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

var deadline = new Date(Date.parse(new Date()) + 60 * 1000);

initializeClock('clockdiv', deadline);