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

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

HIT

04.11.2015

2864

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

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]
  • Комментарии
  • Вложения

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

Notice: Функция WP_Styles::add вызвана неправильно. Стиль с дескриптором "editor-buttons" был поставлен в очередь с незарегистрированными зависимостями: dashicons. Дополнительную информацию можно найти на странице «Отладка в WordPress». (Это сообщение было добавлено в версии 6.9.1.) in /home/t/tiberi6w/opttour.ru/public_html/wp-includes/functions.php on line 6170

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

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