В жизни каждого из нас настаёт момент, когда нужно сделать на сайте таймер обратного отсчёта. Без пафоса, без заморочек — просто табло, которое будет отсчитывать время до 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;}Вот и всё. Пользуйтесь на здоровье.