Таймер обратного отсчёта на CSS + JS
 | |
| Один из простых и несложных в настройках таймер обратного отсчета, который использует Javascript, где дизайн создан красивой зеленой обработке. В этой статье мы рассмотрим один из многих вариантов, где не нужно подключать библиотеке, где все работает на Javascript. С помощью функций такого таймера, то здесь можно изначально прописать дату, которая будет отвечать какое то мероприятие. Вероятно вы не раз встречали, что сайт откроется через, и ниже мы наблюдаем таймер, который отчитывает числа до какого-нибудь события. Что можно установить на любую заглушку, где вы как веб мастер собрались на сайте сделать технические работы. Что сразу задаете пример времени, но выставим на 2 суток, и начнется отчет. Как только дойдет до всех нулей, то смело открываем сайт. Ведь все ставится для информации, но когда мы наблюдаем отчет, то уже смотрится совершенно по другому. Это качается разных мероприятий, где нужно собрать как можно больше пользователей, ведь мы изначально напишем, это тех-работы или по окончанию времени будем разыгрывать призы. Такой вид будет после установки:  Установка: Так, что остается установить таймер обратного отсчета, который отсчитывает в секундах, минутах, часах и днях любую дату с поддержкой часового пояса. А под какие нужды, то они реально обширны, где в большинстве технические или даже тематические можно встретить. HTML Код <div id="sposob" class="sposob"> <div class="taymera-obratnog"> <span class="days sposob-time"></span> <span class="sposob-text">Дней</span> </div> <div class="taymera-obratnog"> <span class="hours sposob-time"></span> <span class="sposob-text">Часов</span> </div> <div class="taymera-obratnog"> <span class="minutes sposob-time"></span> <span class="sposob-text">Минут</span> </div> <div class="taymera-obratnog"> <span class="seconds sposob-time"></span> <span class="sposob-text">Секунд</span> </div> </div> CSS Код .obratnogo-otschota { color: #396; font-weight: 100; font-size: 40px; margin: 40px 0px 20px; } .sposob { font-family: sans-serif; color: #f7e3e3; display: inline-block; font-weight: 100; text-align: center; font-size: 30px; } .taymera-obratnog { padding: 12px; border-radius: 2px; background: #18caa3; display: inline-block; } .sposob-time { padding: 18px; border-radius: 2px; background: #137564; display: inline-block; } .sposob-text { display: block; padding-top: 5px; font-size: 16px; } JS Код 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="January 01 2018 00:00:00 GMT+0300"; //for Ukraine var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000); // for endless timer initializeClock('sposob', deadline); По своему функционалу таймеры идеально подходят для повседневных занятий, таких как приготовление еды, прохождение викторин, выступление с речами, занятия спортом или занятия музыкой. Где мгновенно создайте красивые, анимированные часы обратного отсчета, чтобы поделиться или вставить на свой сайт. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |