javascript - 如何避免时钟计数器为负值

我为测验模块制作了一个倒数时钟，因此无论何时计数器结束，我都会得到一个负值。计时器结束后，我得到-1:-1，我希望它是00:00。
我以为总时间会有错误，但我无法找出错误

我已经尝试过这种逻辑，但无法正常工作

<script>
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);
    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
    };
}

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($('.minutes').text() == '00' && $('.seconds').text() == '00')
    {
      if(score == 0)
          {
            // Wrap every letter in a span
            document.getElementById("congrats").innerHTML = "Better Luck Next time"; //When all the words are solved, greeting is displayed
            document.getElementById("part1").hidden = false;
                  document.getElementById("goodjob").hidden = false;
                  document.getElementById("part2").hidden = false;
                  document.getElementById("button5").disabled = true;


              document.getElementById("totscore").innerHTML = "Total correct answer " + score;
                    document.getElementById("totcoins").innerHTML = "Total coins achieved " + score;
                    document.getElementById("coins").hidden = false;
                    document.getElementById("my_audio").pause();
            setTimeout(function(){
            document.getElementById("drop").play();
            }, 1000)
          }
          else if(score == 5){
            document.getElementById("congrats").innerHTML = "Congratulations You solved all three piece words"; //When all the words are solved, greeting is displayed
            document.getElementById("part1").hidden = false;
                  document.getElementById("goodjob").hidden = false;
                  document.getElementById("part2").hidden = false;


              document.getElementById("totscore").innerHTML = "Total correct answer " + score;
                    document.getElementById("totcoins").innerHTML = "Total coins achieved " + score;
                    document.getElementById("coins").hidden = false;
                    document.getElementById("my_audio").pause();
            setTimeout(function(){
            document.getElementById("drop").play();
            }, 1000)
          }

    }

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

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

var deadline = new Date(Date.parse(new Date()) + 20 * 1000);
initializeClock('clockdiv', deadline);
</script>

我的HTML代码

<nav class="navbar navbar-light bg-light fixed-top">
<div class="row" style="width:100%">
    <div class="col-md-6">
        <div id="clockdiv">
            <div>
                <span class="minutes"></span>
                <div class="smalltext">Minutes</div>
            </div>
            <div>
                <span class="seconds"></span>
                <div class="smalltext">Seconds</div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="score-box" id="scoring">
            Your Score is 0
        </div>
    </div>
</div>

</nav>

最佳答案

您的函数在达到0后再次运行一次，因此结果为-1。

您可以通过 checkin 功能以获取剩余时间来快速修复它:

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);
    var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
    var days = Math.floor(t / (1000 * 60 * 60 * 24));

    minutes = minutes < 0? 0 : minutes; //Check if they are lower than 0, if yes, set them to 0
    seconds = seconds < 0? 0 : seconds;

    return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
    };
}

关于javascript - 如何避免时钟计数器为负值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57249670/