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