Как остановить сброс таймера JavaScript после его завершения - PullRequest
Новая
       23

Как остановить сброс таймера JavaScript после его завершения

1 голос
/ 08 мая 2019

Я создаю форму, для которой мне нужен простой 10-минутный таймер обратного отсчета JavaScript для отображения. Я нашел и использую код в верхней части страницы здесь: Простейший из возможных таймеров обратного отсчета JavaScript? .. Он делает именно то, что мне нужно, но мне нужно, чтобы таймер не сбрасывался, когда он достигает 00:00. Я новичок, когда дело доходит до Javascript, поэтому любая помощь будет принята с благодарностью.

Я просмотрел сообщение на Простейший из возможных таймеров обратного отсчета JavaScript? ... но не смог увидеть никого, кто специально говорил о том, как остановить таймер от сброса, когда он закончился. 

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

window.onload = function () {
    var fiveMinutes = 60 * 10,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

Таймер работает так, как мне нужно, но он сбрасывается каждый раз, когда достигает 0. Мне просто нужно, чтобы он запускался при загрузке страницы и останавливался через 10 минут. Я просто напоминаю пользователям моей формы сохранять свои черновики каждые 10 минут.

Ответы [ 2 ]

2 голосов
/ 08 мая 2019

Попробуйте это: 

var myInterval = 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) {
        clearInterval(myInterval);
    }
}, 1000);
0 голосов
/ 08 мая 2019

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

  //Countdown Timer

  var startTime = 10; //set countdown in Minutes  
  var doneClass = "done";
  var blinkerClass = "blink";
  function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    var intervalLoop = setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        for(var i=0;i<display.length;i++){
          display[i].textContent = minutes + ":" + seconds;
        }
        if (--timer < 0) {
          for(var i=0;i<display.length;i++){
            display[i].classList.add(doneClass);
            display[i].classList.add(blinkerClass);
            display[i].textContent = "Save Now";
          }
          clearInterval(intervalLoop);
        }
        }, 1000);
    }
window.onload = function () {
    var setMinutes = 60 * startTime,
    display = $('#timer');
    startTimer(setMinutes, display);
};

  //End Countdown timer

Вот CSS, указанный в приведенном выше коде 


.done {color: tomato !important; font-weight: bold;}
.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
...