JQuery "оживить" цифры

[MSW]

Подскажите, пожалуйста, как оживить счётчик, например чтоб считались секунды
хочу сделать так что бы время на сервере показывалось динамически.

смотрел вот эту штуку -

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

- но оно считает в обратном порядке до определённой даты, или от определённой даты.

так же смотрел вот такое -

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

- но тут берутся показания времени со стороны пользователя а не сервера...

как вариант можно сделать такое:
от серверного времени отнять время которое у пользователя и потом выводить время которое у пользователя, но со сдвигом разницы от сервера, но чувствую что это не очень праильное решение... может есть более простое, или правильно решение?

 

[ConstNW]

используй jClock plugin 2.0.1
в options'ах используй параметр "seedTime".

    $(function($) {
      var options = {
        timeNotation: '12h',
        am_pm: true,
        fontFamily: 'Verdana, Times New Roman',
        fontSize: '20px',
        foreground: 'yellow',
        background: 'red',
        seedTime: 1234567890000
        // unix_time_stamp * 1000
        // javascript работает с миллисекундами!
      }
      $('.jclock').jclock(options);
    });

 

[MSW]

с помощью jquery.jclock.js всё прекрасно получилось

выделив только нужное получилось так:

<script type="text/javascript">
		$(function($) {
			var options = {
			seedTime: ".TIME." * 1000
			}
		$('.jclock').jclock(options);
		});
		</script>
		<span class="jclock"></span>

но jquery.jclock.js считает и выводит как время.

а какбы теперь сделать чтоб также считались просто цифры?
например со скоростью +3 в секунду?
тобишь есть число, допустим 556, и нужно чтоб к нему каждую секунду добавлялось +3

 

[ConstNW]

если считать не время, а какие-то числа с требуемым шагом, то лучше чтонить свое сделать.

---------- Post added at 18:01 ---------- Previous post was at 16:45 ----------

//jquery.iterator.js
/*
 * jQuery iterator - iterator plugin - v 0.0.1
 *
 * Copyright (c) 2009 ConstNW
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */
(function($){

	$.fn.iterator = function(options){
		var version = '0.0.1';
		
		// options
		var opts = $.extend({}, $.fn.iterator.defaults, options);
		
		return this.each(function(){
			$this = $(this);
			$this.timerID = null;
			$this.running = false;
			
			$this.increment = null;
			
			var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
			$this.startNum = o.startNum;
			$this.step = o.step;
			$this.timeout = o.timeout;
			
			$.fn.iterator.start($this);
		});
	};
	
	$.fn.iterator.start = function(el){
		$.fn.iterator.stop(el);
		$.fn.iterator.display(el);
	}
	$.fn.iterator.stop = function(el){
		if (el.running) clearTimeout(el.timerID);
		el.running = false;
	}
	$.fn.iterator.display = function(el){
		var time = $.fn.iterator.getValue(el);
		el.html(time);
		el.timerID = setTimeout(function(){ $.fn.iterator.display(el); }, el.timeout);
	}
	$.fn.iterator.getValue = function(el){
		if( el.increment == null )
			el.increment = el.startNum;
		else
			el.increment += el.step;
			
		return el.increment;
	};
	
	$.fn.iterator.defaults = {
		startNum: 0,
		step: 3,
		timeout: 1000 // 1000 = one second, 60000 = one minute
	};
	
})(jQuery);

используем вот так:

  <script type="text/javascript">
    $(function($) {
      var options = {
        startNum: 100,
	step: 4
      }
      $('.iter').iterator(options);
    });
  </script>

 

[MSW]

ConstNW,
классно)) работает, спасибо большое!
только с округлением нужно разобраться, потому что шаг счёта получается очень дробный))) там до сотен тысяч значений после запятой
пусть оно такое дробное считает, но для вывода просто целую часть выводить нужно

насколько понял нужно подставить куда-то тудеа ге выводится результат подставить .toFixed(0) ?

 

[ConstNW]

Да, можно toFixed, можно использовать Math.ceil, floor, round.
Вариантов уйма.
Изменения вносить в этой функции:

	$.fn.iterator.getValue = function(el){
		if( el.increment == null )
			el.increment = el.startNum;
		else
			el.increment += el.step;
		//Например вот тут:
		return el.increment.toFixed(0);
	};

 

[MSW]

ConstNW,
спасибо

а чтоб сделать остановку когда досчитается до определённого числа - это много придётся переделывать?

 

[ConstNW]

Смотри комментарии в коде))

//jquery.iterator.js
/*
 * jQuery iterator - iterator plugin - v 0.0.2
 *
 * Copyright (c) 2009 ConstNW
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */
(function($){

	$.fn.iterator = function(options){
		var version = '0.0.2';
		
		// options
		var opts = $.extend({}, $.fn.iterator.defaults, options);
		
		return this.each(function(){
			$this = $(this);
			$this.timerID = null;
			$this.running = false;
			
			$this.increment = null;
			
			var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
			$this.startNum = o.startNum;
			$this.stopNum = o.stopNum;
			$this.step = o.step;
			$this.timeout = o.timeout;
			
			$.fn.iterator.start($this);
		});
	};
	
	$.fn.iterator.start = function(el){
		$.fn.iterator.stop(el);
		$.fn.iterator.display(el);
	}
	$.fn.iterator.stop = function(el){
		if (el.running) clearTimeout(el.timerID);
		el.running = false;
	}
	$.fn.iterator.display = function(el){
		var value = $.fn.iterator.getValue(el);
		value = Math.min(value, el.stopNum);
		el.html(value);
		
		if(value == el.stopNum) $.fn.iterator.stop(el);
		
		el.timerID = setTimeout(function(){ $.fn.iterator.display(el); }, el.timeout);
	}
	$.fn.iterator.getValue = function(el){
		if( el.increment == null )
			el.increment = el.startNum;
		else
			el.increment += el.step;
		//Возвращаемое значение должно быть числом!
		//toFixed возвращает строку
		return Math.ceil(el.increment);
	};
	
	$.fn.iterator.defaults = {
		startNum: 0,
		stopNum: 100,
		step: 3,
		timeout: 1000 // 1000 = one second, 60000 = one minute
	};
	
})(jQuery);

 

[MSW]

ConstNW,
класс

наверно уже замучал, но можно ещё немножко помучать?))

в яве поидее нет аналога для функции number_format, которая есть в пхп?

как можно сделать чтоб вместо, например 5634458 выводилось 5.634.458 ?



и если startNum > stopNum - то просто показывать текущий startNum

 

[ConstNW]

number_format в js нет, но есть гугл в котором по запросу "javascript number_format" нужное решение первой ссылкой

По поводу условия "startNum > stopNum" - надо править содержимое функции $.fn.iterator.display