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

Question

我为测验模块制作了一个倒计时时钟，所以每当计数器结束时，我都会得到一个负值。计时器结束后，我得到 -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>

Answer 1

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

您可以通过检查函数以获取剩余时间来快速修复它:

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