Рассмотрим ультимативное решение по реализации счетчиков обратного отсчета времени.
Jquery Countdown (by hilios)
Подключаем скрипт
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.countdown.min.js"></script>
Вставляем в верстку
<div align="center">
<div class="countdown"> </div>
</div>
Скрипт инициализация счетчика + настройки
<script type="text/javascript">
$(document).ready(function(){
// Счетчик обратного времени
$('#clock').countdown('2015/11/03 18:38:50')
.on('update.countdown', function(event) {
var format = 'До Нового года осталось:<br> %D дней %H часов %M минут %S секунд';
$(this).html(event.strftime(format));
})
.on('finish.countdown', function(event) {
$('#nybanner').show();
$('#nybanner').removeClass('animated fadeOutDown');
$('#nybanner').addClass('animated fadeInDown');
$('#backfon').show();
$('#backfon').removeClass('fadeOut');
$('#backfon').addClass('animated fadeIn');
});
$('#backfon').click(function() { $('#nybanner').addClass('fadeOutDown'); });
});
</script>
Примеры счетчиков
Примеры с версткой HTML

jQuery("#sale-end").countdown("2023/4/15", function(event) {
jQuery(this).html(
event.strftime('%D дней <span>|</span> %H часов <span>|</span> %M минуты <span>|</span> %S секунд')
);
});

jQuery("#event-start").countdown("2023/4/26", function(event) {
jQuery(this).html(
event.strftime('<div class="num">%D<span>дней</span></div><div>:</div><div class="num">%H<span>часов</span></div><div>:</div><div class="num">%M<span>минуты</span></div><div>:</div><div class="num">%S<span>секунд</span></div>')
);
});
[site-socialshare]