Javascript обратный отсчет становится отрицательным по истечении срока - PullRequest
0 голосов
/ 07 августа 2020

Я изучаю Javascript и играю с таймером обратного отсчета, мне удалось заставить его работать в определенной степени, но не могу остановить таймер, когда он достигнет 0, в консоли он также выдает ошибку: «ReferenceError: Невозможно получить доступ к 'timeinterval' перед инициализацией»

Любая помощь и совет были бы замечательными, заранее спасибо.

Ниже приведен код.

function getTimeRemaining(endtime) {
    const total = Date.parse(endtime) - Date.parse(new Date());
    const seconds = Math.floor((total / 1000) % 60);
    const minutes = Math.floor((total / 1000 / 60) % 60);
    const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
    const days = Math.floor(total / (1000 * 60 * 60 * 24));

    return {
      total,
      days,
      hours,
      minutes,
      seconds
    };
  }

  function initializeClock(id, endtime) {
    const clock = document.getElementById(id);
    const daysSpan = clock.querySelector('.days');
    const hoursSpan = clock.querySelector('.hours');
    const minutesSpan = clock.querySelector('.minutes');
    const secondsSpan = clock.querySelector('.seconds');

    function updateClock() {
      const t = getTimeRemaining(endtime);

      daysSpan.innerHTML = ('0' + t.days).slice(-2);
      hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
      minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
      secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

      if (t.total <= 0) {
        clearInterval(timeinterval);
        console.log(timeinterval);
      }
    }

    updateClock();
    const timeinterval = setInterval(updateClock, 1000);
  }

  const deadline = new Date(Date.parse(new Date('2020-8-6')));
  initializeClock('clockdiv', deadline);

1 Ответ

0 голосов
/ 07 августа 2020

Уловка состоит в том, чтобы понять сообщение об ошибке.

Переместите const timeinterval = setInterval(updateClock, 1000); выше function updateClock, и все будет в порядке :)

Отредактируйте dank-worker-j41rp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...