Таймер обратного отсчета

В жизни каждого из нас настаёт момент, когда нужно сделать на сайте таймер обратного отсчёта. Без пафоса, без заморочек — просто табло, которое будет отсчитывать время до X.

Наш таймер обратного отсчета будет простым — без круговых визуализаций, без скевоморфизмных перелистывающихся циферок. Просто цифры с подписями и всё. Мы не станем сильно заморачиваться и строить свой велосипед, а возьмём готовое решение и немного его изменим.

Для начала создадим разметку таймера:

<div class="Countdown" id="countdown">
    <h1>Таймер обратного отсчёта</h1>
    <figure>
        <span class="days"></span>
        <figcaption>Дни</figcaption>
    </figure>
    <figure>
        <span class="hours"></span>
        <figcaption>Часы</figcaption>
    </figure>
    <figure>
        <span class="minutes"></span>
        <figcaption>Минуты</figcaption>
    </figure>
    <figure>
        <span class="seconds"></span>
        <figcaption>Секунды</figcaption>
    </figure>
</div>

У нас имеется основной блок, в котором содержатся 4 фигуры — по количеству элементов отсчёта. Внутри каждой фигуры — элемент <span> с обязательным классом, в который скрипт на основании указанного класса будет вставлять нужное значение, и стандартный элемент для фигуры — <figcaption>, в котором мы подписываем, что это за значение.

Теперь скрипт — он просто стандартно вставляется на страницу, не требуя подключения дополнительных библиотек типа  jQuery. Я его привожу сразу с тегами, чтобы было удобнее копипастить:

<script type="text/javascript">
    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);
      var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
      var days = Math.floor(t / (1000 * 60 * 60 * 24));
      return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
      };
    }
    function initializeClock(id, endtime) {
      var clock = document.getElementById(id);
      var daysSpan = clock.querySelector('.days');
      var hoursSpan = clock.querySelector('.hours');
      var minutesSpan = clock.querySelector('.minutes');
      var secondsSpan = clock.querySelector('.seconds');

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

        daysSpan.innerHTML = t.days;
        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);
        }
      }

      updateClock();
      var timeinterval = setInterval(updateClock, 1000);
    }
    var deadline = new Date('2019-01-01T00:00:00');
    initializeClock('countdown', deadline);
</script>

Из всех его строчек нам важна только одна — значение переменной deadline, для которой мы устанавливаем дату, до которой скрипту нужно считать. Время необходимо указывать в международном стандарте ISO 8601. В нашем примере я установил дату наступления 1 января 2019 года — она записана в виде 2019-01-01T00:00:00, где сначала мы указываем год, затем месяц и день, после ставим латинскую T и устанавливаем час:минуту:секунду.

Осталось только навести красоты с помощью стилей.

.Countdown {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    align-items: flex-start;
    align-content: stretch;
    width: auto;
    margin: auto;
}
.Countdown h1 {
    display: block;
    width: 100%;
    margin-bottom: 7px;
    text-align: center;
    font-size: 30px;
    color: #424242;
}
.Countdown figure {
    display: block;
    margin: 0;
    padding: 10px 25px;
    text-align: center;
}
.Countdown span {
    font-size: 52px;
    font-weight: bold;
    color: #1565C0;
}
.Countdown figcaption {
    font-size: 20px;
    color: #90A4AE;
}

Вот и всё. Пользуйтесь на здоровье.