0

Интересно как можно доработать скрипт, чтобы таймер считался до полуночи (к примеру), а затем не уходил в минус, а начинал заново свой 24-часовой отсчёт

const deadlineV1 = '2021-06-29';

setClockV1('.timer', deadlineV1);

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

function getZero(num) {
    if (num >= 0 && num < 10) {
        return '0' + num;
    }
    return num;
}

function setClockV1(selector, endtime) {
    const timer = document.querySelector(selector);
    const days = timer.querySelector('#days-v1');
    const hours = timer.querySelector('#hours-v1');
    const minutes = timer.querySelector('#minutes-v1');
    const seconds = timer.querySelector('#seconds-v1');
    const timeInterval = setInterval(updateClock, 1000);
    updateClock();

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

        days.innerHTML = getZero(t.days);
        hours.innerHTML = getZero(t.hours);
        minutes.innerHTML = getZero(t.minutes);
        seconds.innerHTML = getZero(t.seconds);

        if (t.total <= 0) {
            clearInterval(timeInterval);
        }
    }
}
<div class="timer">
      <div class="timer__block">
          <span id="days-v1"></span>
          <p>DAYS</p>
      </div>
      <div class="timer__block">
          <span id="hours-v1"></span>
          <p>HR</p>
      </div>
      <div class="timer__block">
          <span id="minutes-v1"></span>
          <p>MIN</p>
      </div>
      <div class="timer__block">
          <span id="seconds-v1"></span>
          <p>SEC</p>
      </div>
  </div>

1
  • const t = Date.parse(endtime) - Date.parse(new Date()); у вас же здесь endtime указан, считается время до этой даты. Поэтому и отрицательные значения при наступлении этой даты. Так задумано, видимо... if (t.total <= 0) по этому условию вообще в минус по идее не должен уходить, но тут и можно добавить один день к изначальной endtime если вообще об этом речь.
    – Leonid
    28 июн 2021 в 14:14

1 ответ 1

1

Нужно внести изменения в следующий код:

    if (t.total <= 0) {
        clearInterval(timeInterval);
        deadlineV1 = new Date();
        deadlineV1.setDate(new Date().getDate() + 1);
        setClockV1('.timer', deadlineV1);
    }     

И const deadlineV1 замените на

    let deadlineV1 = '2021-06-29';
1
  • Спасибо большое!
    – Krovorgen
    28 июн 2021 в 17:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.