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

Статус
В этой теме нельзя размещать новые ответы.

MSW

Мой дом здесь!
Регистрация
27 Авг 2007
Сообщения
491
Реакции
414
Подскажите, пожалуйста, как оживить счётчик, например чтоб считались секунды
хочу сделать так что бы время на сервере показывалось динамически.

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

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

как вариант можно сделать такое:
от серверного времени отнять время которое у пользователя и потом выводить время которое у пользователя, но со сдвигом разницы от сервера, но чувствую что это не очень праильное решение... может есть более простое, или правильно решение?
 
используй 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
 
если считать не время, а какие-то числа с требуемым шагом, то лучше чтонить свое сделать.

---------- 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);

используем вот так:
HTML:
  <script type="text/javascript">
    $(function($) {
      var options = {
        startNum: 100,
	step: 4
      }
      $('.iter').iterator(options);
    });
  </script>
 
  • Нравится
Реакции: MSW
ConstNW,
классно)) работает, спасибо большое! :)
только с округлением нужно разобраться, потому что шаг счёта получается очень дробный))) там до сотен тысяч значений после запятой :)
пусть оно такое дробное считает, но для вывода просто целую часть выводить нужно :)

насколько понял нужно подставить куда-то тудеа ге выводится результат подставить .toFixed(0) ?
 
Да, можно 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,
спасибо :)

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

Код:
//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 :)
 
number_format в js нет, но есть гугл в котором по запросу "javascript number_format" нужное решение первой ссылкой ;)

По поводу условия "startNum > stopNum" - надо править содержимое функции $.fn.iterator.display
 
  • Нравится
Реакции: MSW
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху