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

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

HIT

04.11.2015

2120

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

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 минут.