Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Помоги зациклить таймер (https://javascript.ru/forum/dom-window/45495-pomogi-zaciklit-tajjmer.html)

Kasper28 03.03.2014 15:54

Помоги зациклить таймер
 
Добрый день, уважаемые специалисты.
Помогите зациклить таймер обратного отсчета. По задумке должен обновляться каждый день, то есть каждые 24 часа.
Буду очень благодарен за помощь

Вот скрипт таймера:
(function($){
	
	// Number of seconds in every time division
	var days	= 24*60*60,
		hours	= 60*60,
		minutes	= 60;
	
	// Creating the plugin
	$.fn.countdown = function(prop){
		
		var options = $.extend({
			callback	: function(){},
			timestamp	: 0
		},prop);
		
		var left, d, h, m, s, positions;

		// Initialize the plugin
		init(this, options);
		
		positions = this.find('.position');
		
		(function tick(){
			
			// Time left
			left = Math.floor((options.timestamp - (new Date())) / 1000);
			
			if(left < 0){
				left = 0;
			}
			
			// Number of days left
			d = Math.floor(left / days);
			updateDuo(0, 1, d);
			left -= d*days;
			
			// Number of hours left
			h = Math.floor(left / hours);
			updateDuo(2, 3, h);
			left -= h*hours;
			
			// Number of minutes left
			m = Math.floor(left / minutes);
			updateDuo(4, 5, m);
			left -= m*minutes;
			
			// Number of seconds left
			s = left;
			updateDuo(6, 7, s);
			
			// Calling an optional user supplied callback
			options.callback(d, h, m, s);
			
			// Scheduling another call of this function in 1s
			setTimeout(tick, 1000);
		})();
		
		// This function updates two digit positions at once
		function updateDuo(minor,major,value){
			switchDigit(positions.eq(minor),Math.floor(value/10)%10);
			switchDigit(positions.eq(major),value%10);
		}
		
		return this;
	};


	function init(elem, options){
		elem.addClass('countdownHolder');

		// Creating the markup inside the container
		$.each(['Days','Hours','Minutes','Seconds'],function(i){
			$('<span class="count'+this+'">').html(
				'<div>\
				<p class="position">\
					<span class="digit static">0</span>\
				</p>\
				</div>\
				<div>\
				<p class="position">\
					<span class="digit static">0</span>\
				</p>\
				</div>'
			).appendTo(elem);
			
			if(this!="Seconds"){
				elem.append('<p>:</p><span class="countDiv countDiv'+i+'"></span>');
			}
		});

	}

	// Creates an animated transition between the two numbers
	function switchDigit(position,number){
		
		var digit = position.find('.digit')
		
		if(digit.is(':animated')){
			return false;
		}
		
		if(position.data('digit') == number){
			// We are already showing this number
			return false;
		}
		
		position.data('digit', number);
		
		var replacement = $('<span>',{
			'class':'digit',
			css:{
				top:0,
				opacity:0
			},
			html:number
		});
		
		// The .static class is added when the animation
		// completes. This makes it run smoother.
		
		digit
			.before(replacement)
			.removeClass('static')
			.animate({top:0,opacity:0},'fast',function(){
				digit.remove();
			})

		replacement
			.delay(100)
			.animate({top:0,opacity:1},'fast',function(){
				replacement.addClass('static');
			});
	}
})(jQuery);


И инициализация
$(function(){
			
		$('#counter').countdown({
			timestamp	: (new Date(2014, 02, 04)).getTime() + 01*01*01*60*1000
		});
		
	});

рони 03.03.2014 16:17

Kasper28,
29 строка left = 0;
добавьте

options.timestamp = (new Date()).getTime() + 60*1000;
или на тот срок который вам необходим для нового отсчёта в миллисекундах

Kasper28 04.03.2014 07:35

Не получается. Посмотрите, пожалуйста, что не так делаю, не возобновляется счетчик:
вызываю нужную начальую дату и время:
$(function(){
			
		$('#counter').countdown({
			timestamp	: (new Date(2014, 02, 04, 09, 28)).getTime() + 01*01*01*60*1000
		});
		
	});


Вставляю в скрипт строки, которые вы написали и выставляю 24 часа (нужно возобновлять каждые 24 часа.) в миллисекундах в переменную new Date:
left = Math.floor((options.timestamp - (new Date())) / 1000);

if(left < 0){
left = 0;
options.timestamp = (new Date(86400000)).getTime() + 60*1000;
}

рони 04.03.2014 09:26

Kasper28,
options.timestamp = 86400000;

i2yorx 15.03.2014 19:58

Цитата:

Сообщение от рони (Сообщение 300836)
Kasper28,
options.timestamp = 86400000;

В этом случае зацикливание есть, но при обновлении страницы таймер начинает отсчитывать заново. В общем-то логично, но как сделать, чтобы и зацикливание было и таймер при обновлении не сбрасывался?

рони 15.03.2014 20:18

i2yorx,
ответ тут или job за тугрики


Часовой пояс GMT +3, время: 19:41.