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

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

HIT

04.11.2015

2540

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

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>')
	);
	
});
[site-socialshare]
  • Комментарии
  • Вложения

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

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

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