Таймер обратного отсчета для сайта. E-timer.
Поднимаю достаточно старую заметку про то, как разместить таймер обратного отсчета на сайт. В то время я пользовался скриптом E-timer.
E-timer - это бесплатный таймер обратного отсчета для сайта. Работать с ним очень просто, все настройки доступны и интуитивно понятны, поэтому разобраться с ним сможет даже человек у которого нет специальных знаний по html, css и javascript. Рассмотрим по шагам настройку таймер обратного отсчета.
Настройка основных параметров для таймера обратного отсчета e timer:
В основных настройках присутствуют:
- Возможность подключения библиотеки jQuery, на основе которой и работает таймер, обычно библиотека уже подключена на сайте и подключать её не требуется;
- Возможность настройки перезапуска таймера (не перезапускать, перезапускать каждый день, каждую неделю или каждый месяц);
- Возможность указать дату с точностью до минут, когда закончится отсчет;
- Возможность размещения в таймере своего заголовка;
Настройки отображения таймера и цифр интуитивно понятны, поигравшись с этими настройками, вы получите стилизованный под ваш сайт таймер обратного отсчета.
Пример js кода, который нужно разместить, чтобы увидеть таймер обратного отсчета на странице сайта:
<script src="https://e-timer.ru/js/etimer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".eTimer").eTimer({
etType: 0, etDate: "26.09.2018.8.10", etTitleText: "До окончания акции осталось:", etTitleSize: 20, etShowSign: 1, etSep: ":", etFontFamily: "Trebuchet MS", etTextColor: "#a3a3a3", etPaddingTB: 15, etPaddingLR: 15, etBackground: "#333333", etBorderSize: 0, etBorderRadius: 2, etBorderColor: "white", etShadow: " 0px 0px 10px 0px #333333", etLastUnit: 4, etNumberFontFamily: "Impact", etNumberSize: 35, etNumberColor: "white", etNumberPaddingTB: 0, etNumberPaddingLR: 8, etNumberBackground: "#11abb0", etNumberBorderSize: 0, etNumberBorderRadius: 5, etNumberBorderColor: "white", etNumberShadow: "inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5)"
});
});
</script>
HTML код таймера обратного отсчета на сайт:
<div class="eTimer"></div>
Скопировать этот код можно после настройки в соответствующем окне или с моего сайта, здесь настройки указаны по умолчанию, такие же как у e timer.
Теперь мы узнали как можно разместить таймер обратного отсчета на сайт, на основе таймера e timer. Всем удачи и успехов в работе!