/ Сайтостроение / Scripts & jquery / Таймер обратного отcчета

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

03.11.2015

703

Рассмотрим функционал скрипта таймера обратного отчета времени.

Сервисы — бесплатные таймеры:

megatimer.ru
www.timegenerator.ru
e-timer.ru

Исходные компоненты таймера e-timer:

Подключаем скрипт

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/etimer.js"></script>


Скрипт с параметрами таймера

<script type="text/javascript">
$(document).ready(function() {

jQuery(".eTimer").eTimer({ etType: 0, etDate: "01.01.2016.0.0", etTitleText: "До Нового года осталось:", etShowSign: 1, etSep: ":" });

});
</script>

Вставить туда где выводить счетчик

<div align="center"><div class="eTimer"></div></div>

CSS

/* Таймер отчета обратного времени */

.eTimer {
color: #fff !important;
padding: 15px 15px !important;
background: #333333 !important;
border: 0px solid white !important;
font-family: "PlayRegular" !important;  
text-align: center;  
-webkit-border-radius: 2px !important;
-moz-border-radius: 2px !important;
border-radius: 2px !important;
-webkit-box-shadow: 0px 0px 10px 0px #333333 !important;
-moz-box-shadow: 0px 0px 10px 0px #333333 !important;
box-shadow: 0px 0px 10px 0px #333333 !important;  
}

.eTimer .etUnit .etNumber {
color: #fff !important;
font-family: "PlayRegular" !important;  
padding: 15px 15px !important;
border: 0px solid #333333 !important;
background: #11abb0 !important;
border-radius: 5px !important;
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5) !important;
-moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5) !important;
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5) !important;
}

.eTimer .etSep {
padding: 15px 5px !important;
}

Недостаток: по завершении отсчета ничего не происходит

Поделится информацией с друзьями

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Таймер обратного отcчета
Scrollspy jquery
Рекомендации для васScrollspy jqueryOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.