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

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

HIT

04.11.2015

2345

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

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
Рекомендации по созданию лэндинга
Рекомендации для васРекомендации по созданию лэндингаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.