Вызовите div-контейнер, когда мой таймер достигнет нуля

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

Я уже искал здесь ответы, но многие не используют этот таймер, который я выбрал.

Спасибо за вашу помощь!Бр Жасмин

Answer 1

Таймер сбрасывался каждый раз, когда он заканчивался (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>

Answer 2

Это простое преобразование прошедшего времени в секунды и уменьшение таймера на 1 при каждом вызове целого числа, clearInterval, когда значение таймера меньше 0

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