Рассмотрим функционал скрипта таймера обратного отчета времени.
Сервисы — бесплатные таймеры:
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;
}
Недостаток: по завершении отсчета ничего не происходит
