Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.03.2014, 15:54
Новичок на форуме
Отправить личное сообщение для Kasper28 Посмотреть профиль Найти все сообщения от Kasper28
 
Регистрация: 09.02.2014
Сообщений: 9

Помоги зациклить таймер
Добрый день, уважаемые специалисты.
Помогите зациклить таймер обратного отсчета. По задумке должен обновляться каждый день, то есть каждые 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
		});
		
	});
Ответить с цитированием
  #2 (permalink)  
Старый 03.03.2014, 16:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

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

options.timestamp = (new Date()).getTime() + 60*1000;
или на тот срок который вам необходим для нового отсчёта в миллисекундах
Ответить с цитированием
  #3 (permalink)  
Старый 04.03.2014, 07:35
Новичок на форуме
Отправить личное сообщение для Kasper28 Посмотреть профиль Найти все сообщения от Kasper28
 
Регистрация: 09.02.2014
Сообщений: 9

Не получается. Посмотрите, пожалуйста, что не так делаю, не возобновляется счетчик:
вызываю нужную начальую дату и время:
$(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;
}
Ответить с цитированием
  #4 (permalink)  
Старый 04.03.2014, 09:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Kasper28,
options.timestamp = 86400000;
Ответить с цитированием
  #5 (permalink)  
Старый 15.03.2014, 19:58
Новичок на форуме
Отправить личное сообщение для i2yorx Посмотреть профиль Найти все сообщения от i2yorx
 
Регистрация: 15.03.2014
Сообщений: 4

Сообщение от рони Посмотреть сообщение
Kasper28,
options.timestamp = 86400000;
В этом случае зацикливание есть, но при обновлении страницы таймер начинает отсчитывать заново. В общем-то логично, но как сделать, чтобы и зацикливание было и таймер при обновлении не сбрасывался?
Ответить с цитированием
  #6 (permalink)  
Старый 15.03.2014, 20:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

i2yorx,
ответ тут или job за тугрики
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обновляемый таймер на javascript smillyhamster Общие вопросы Javascript 1 31.12.2013 10:30
Таймер обратного отсчёта useruser Элементы интерфейса 5 04.11.2013 07:29
Зацикленный таймер jacko Общие вопросы Javascript 2 01.07.2012 14:32
Таймер для слайдера (jQuery) RamPi Events/DOM/Window 0 23.05.2011 14:52
Как два раза вставить таймер alexvost Общие вопросы Javascript 2 08.02.2011 02:28