/ Scripts & jquery / Таймеры отсчета времени jquery countdown

Таймеры отсчета времени jquery countdown

HIT

04.11.2015

2240

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

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">&nbsp;</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&nbsp;дней  <span>|</span>  %H&nbsp;часов  <span>|</span>  %M&nbsp;минуты  <span>|</span>  %S&nbsp;секунд')
	);
	
});
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>')
	);
	
});

Поделиться в соц. сетях:

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

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

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

Таймеры отсчета времени jquery countdown Таймеры отсчета времени jquery countdown Таймеры отсчета времени jquery countdown
Почта домена для сайта на WordPress
Рекомендации для васПочта домена для сайта на WordPressOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.