Установите для параметра «Пауза» сценарий таймера обратного отсчета Javascript.

Я создаю таймер обратного отсчета. Пока это мой код.

function countdownTimeStart() {

var el = document.getElementById('demo');
var cancel = document.getElementById('cancel');

/* Start count the time in timer panel */
var time = document.getElementById("picker-dates").value;
time = time.split(':');

var x = setInterval(function () {

    // set hours, minutes and seconds, decrease seconds
    var hours = time[0];
    var minutes = time[1];
    var seconds = time[2]--;

    console.log(time);

    // create a function to handle the cancel
    function cancelCountdown(){
        el.innerHTML = "00:00:00";
        clearInterval(x);
    }
    // attach listener to cancel if cancel button is clicked
    cancel.addEventListener( 'click', cancelCountdown);

    // if seconds are negative, set them to 59 and reduce minutes
    if (time[2] == -1) {
        time[1]--;
        time[2] = 59
    }

    // if minutes are negative, set them to 59 and reduce hours
    if (time[1] == -1) {
        time[0]--;
        time[1] = 59
    }

    // Output the result in an element with id="demo"
    if( seconds == 0 && minutes == 0 && hours == 0 ){
        clearInterval(x);
        el.innerHTML = "00:00:00";
    } else if (seconds < 10) {
        el.innerHTML = hours + ": " + minutes + ": " + "0" + seconds + " ";
    } else {
        el.innerHTML = hours + ": " + minutes + ": " + seconds + " ";
    }

}, 1000);}

Поэтому я хочу создать для этого кнопку паузы. Я ссылался на похожие вопросы, такие как Javascript — приостановка setInterval().

Кажется, что в jquery легко создать опцию паузы. Но я понятия не имею, как я могу применить это к моему сценарию. Кто-нибудь может мне помочь.


person Chathuri Fernando    schedule 01.05.2018    source источник
comment
Сохранить время при запуске интервала, отменить интервал при нажатии кнопки, рассчитать интервал времени, который должен иметь, начать новый интервал до истечения расчетного времени   -  person Drag13    schedule 01.05.2018
comment
Не могли бы вы показать путь в качестве ответа. Спасибо.   -  person Chathuri Fernando    schedule 01.05.2018
comment
Единственное значение jQuery в ответе, на который вы ссылаетесь, заключается в добавлении обработчиков событий к паре кнопок, которые устанавливают флаг pause в значение true или false - ничего особенного в идее приостановки таймера. Если вы знаете, как добавлять обработчики событий без jQuery, ответ уже есть.   -  person kshetline    schedule 01.05.2018


Ответы (1)


При нажатии на паузу вы можете создать объект, например savedTime, который сохраняет текущее значение массива time. Затем, когда щелкнут start, вы можете проверить, есть ли что-нибудь в savedTime. Если да, то присвойте hours, minutes и seconds значению этого объекта; в противном случае установите их значения на значения по умолчанию из ввода. Например, что-то вроде:

var el = document.getElementById('demo');
var cancel = document.getElementById('cancel');
var savedTime;
function countdownTimeStart() {
  /* Start count the time in timer panel */
  var timeValue = document.getElementById("picker-dates").value;
  var time;
  if (savedTime) {
    time = savedTime;
    savedTime = null;
  } else time = timeValue.split(':');

  var x = setInterval(function () {
    // set hours, minutes and seconds, decrease seconds
    var hours = time[0];
    var minutes = time[1];
    var seconds = time[2]--;

    // rest of countdownTimeStart is as normal
    // ...
  });

  // Attach this function to your pause button:
  function pauseTimer() {
    savedTime = time;
    clearInterval(x);
  }
}
person CertainPerformance    schedule 01.05.2018
comment
У меня не работает, не должен ли я добавить var pause= document.getElementById('pause'); ? - person Chathuri Fernando; 01.05.2018
comment
Как говорится в комментарии, вам нужно Attach this function to your pause button: - вы не разместили свой HTML-код, поэтому я оставил это вам. - person CertainPerformance; 01.05.2018
comment
‹button id=pause class=pause›Pause‹/button› — это моя кнопка паузы, и можно ли добавить только var pause= document.getElementById('pause'); дополнительно из вашего кода, - person Chathuri Fernando; 01.05.2018
comment
Вам также необходимо прикрепить обработчик кликов к кнопке — простое объявление элемента ничего не даст. - person CertainPerformance; 01.05.2018
comment
Это работает нормально. Могу ли я возобновить его, когда снова нажму кнопку паузы? - person Chathuri Fernando; 01.05.2018
comment
В настоящее время он настроен на возобновление работы при вызове countdownTimeStart. Если вы хотите, нажав кнопку паузы, чтобы возобновить ее, вам придется изменить pauseTimer, чтобы проверить, заполнено ли savedTime. Если он заполнен, то возобновить (то есть вызвать countdownTimeStart); в противном случае назначьте savedTime и очистите интервал. - person CertainPerformance; 01.05.2018