Попытка приостановить и возобновить таймер с той же кнопкой - PullRequest
Новая
       51

Попытка приостановить и возобновить таймер с той же кнопкой

0 голосов
/ 01 июня 2018

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

(function () {
"use strict";
  var minutesLabel = document.getElementById('t1-min'),
    secondsLabel = document.getElementById('t1-sec'),
    resetButton = document.getElementById('t1-reset'),
    startButton = document.getElementById('t1-play'),
    timer = null;


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);
    return {
        'total': t,
        'minutes': minutes,
        'seconds': seconds
    };

}

function initializeClock(endtime) {
        var timeinterval = setInterval(function () {
            var t = getTimeRemaining(endtime);
            if (t.total <= 0) {
                clearInterval(timeinterval);
            }
            minutesLabel.innerHTML = t.minutes;
            secondsLabel.innerHTML = pad(t.seconds);
        }, 1000);
}

startButton.onclick = function runClock() {
    var timeInMinutes = minutesLabel.innerHTML,
        currentTime = Date.parse(new Date()),
        deadline = new Date(currentTime + timeInMinutes * 60 * 1000);
    initializeClock(deadline);
    startButton.innerHTML = ('<i class="far fa-stop-circle fa-2x float-right">');
}

function pad(val) {
    var valString = val + "";
    if (valString.length < 2) {
        return "0" + valString;
    } else {
        return valString;
    }
}

}) ();

1 Ответ

0 голосов
/ 03 июня 2018

Во-первых, убедитесь, что прослушиватель событий правильно размещен в элементе startButton, добавив функцию в метод addEventLister, например: 

startButton.addEventListener("click", function() {
   //code goes here
});

Затем инициализируйте переменную timeinterval в глобальная область действия кода, чтобы к нему можно было получить доступ из всех функций, и добавьте const, в котором вы можете сохранить исходный текст startButton: 

(function () {
  "use strict";
  const START_BUTTON_INITIAL_TEXT = "Start";  // initial constant text of the start button
  var minutesLabel = document.getElementById('t1-min'),
  secondsLabel = document.getElementById('t1-sec'),
  resetButton = document.getElementById('t1-reset'),
  startButton = document.getElementById('t1-play'),
  timer = null,
  timeinterval; // declared in the global scope

Затем добавьте id, равный t1-stop, для элемента значка stopButton, чтобы обеспечить точный доступ к нему из файла Javascript из DOM: 

startButton.innerHTML = ('<i id="t1-stop" class="far fa-stop-circle fa-2x float-right">');

и, наконец, добавьте оператор if вaddEventListener функция startButton для проверки наличия кнопки останова в DOM при нажатии startButton: 

startButton.addEventListener("click", function() {
  if (document.getElementById("t1-stop") != null) { 
    clearInterval(timeinterval);
    var stopButton = document.getElementById("t1-stop");
    startButton.removeChild(stopButton);
    startButton.innerHTML = START_BUTTON_INITIAL_TEXT;
  }

Приведенный выше код останавливает timeinterval и удаляет stopButton изDOM затем заменяет innerHTML из startButton исходным текстом, установленным в качестве константы в объявлении верхней переменной.

В целом, функция прослушивателя событий для startButton должна выглядетькак то так: 

startButton.addEventListener("click", function() {
    if (document.getElementById("t1-stop") != null) { 
        clearInterval(timeinterval);
        var stopButton = document.getElementById("t1-stop");
        startButton.removeChild(stopButton);
        startButton.innerHTML = START_BUTTON_INITIAL_TEXT;
        return; 
    }
    var timeInMinutes = minutesLabel.innerHTML,
        currentTime = Date.parse(new Date()),
        deadline = new Date(currentTime + timeInMinutes * 60 * 1000);
    initializeClock(deadline);
    startButton.innerHTML = ('<i id="t1-stop" class="far fa-stop-circle fa-2x float-right">');
});
...