Question

我想在计时器到达零时立即弹出一个div容器。它应该停止计时器，我做错了什么？

这是html中的计时器：

 <div class="timer">Du hast noch <span id="time" style="color: red">01:00</span> Minuten Zeit!</div>
</div>

这就是我要弹出的容器：

    <div class="container-end-fail">
        <img class="closeup-collier" src="img/Flugzeug-bg.png">
        <p class="closeup-text">Du warst zu langsam! Er ist entkommen!</p>
        <p class="closeup-text">Wir geben dir noch einmal eine Chance. Wir zählen auf dich!</p>
        <a onclick="window.location='6-flughafen.html'">
            <button class="weiter-button" style="background-color:#5c7497">Nochmal versuchen!</button>
        </a>
    </div>

和JS：

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }  else (timer = -1) {
        $('.container-end-fail').show();
        //you also may want to stop the timer once it reaches 0
        clearInterval(timer);
    }

    }, 1000);
}

window.onload = function () {
    var threeMinutes = 60 * 1,
        display = document.querySelector('#time');
    startTimer(threeMinutes, display);
};

我已经在这里寻找答案，但许多人并没有使用我选择的这种计时器。

感谢您的帮助！ Br Jasmin

Answer 1

它的简单转换将时间传递为秒，并在每次调用inteval时将计时器减1;如果计时器值小于0则将clearInterval减少

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    var timerInterval = setInterval(function(){
        if(timer < 0) {
            return false;
        }
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        timer--;
        if (timer <= 0) {
            $('.container-end-fail').show();
            clearInterval(timerInterval);
        } 
    }, 1000);
}

Answer 2

计时器每次结束时都会重置（timer = duration;）。此外，对于在计时器结束后显示的div，您需要先使用style="display:none;"隐藏它。

function startTimer(duration, display) {
      var timer = duration,
        minutes, seconds;
      setInterval(function() {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (timer == 0) {
          $('.container-end-fail').show();
          //you also may want to stop the timer once it reaches 0
          clearInterval(timer);
        } else {
          timer--;
        }

      }, 1000);
    }

    window.onload = function() {
      var threeMinutes = 60 * 1,
        display = document.querySelector('#time');
      startTimer(threeMinutes, display);
    };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timer">Du hast noch <span id="time" style="color: red">01:00</span> Minuten Zeit!</div>
  <div class="container-end-fail" style="display:none;">
    <img class="closeup-collier">
    <p class="closeup-text">Du warst zu langsam! Er ist entkommen!</p>
    <p class="closeup-text">Wir geben dir noch einmal eine Chance. Wir zählen auf dich!</p>
    <a onclick="window.location='6-flughafen.html'">
            <button class="weiter-button" style="background-color:#5c7497">Nochmal versuchen!</button>
        </a>
  </div>

当我的计时器达到零时调用div容器

2 个答案: