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

Тема в разделе "Другие языки", создана пользователем MSW, 14 июл 2009.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. MSW

    MSW

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

    смотрел вот эту штуку - http://keith-wood.name/countdown.html#since - но оно считает в обратном порядке до определённой даты, или от определённой даты.

    так же смотрел вот такое - http://jquery.jclock.js.googlepages.com/jclock.html - но тут берутся показания времени со стороны пользователя а не сервера...

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

    ConstNW Постоялец

    Регистр.:
    30 июн 2007
    Сообщения:
    132
    Симпатии:
    39
    используй 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 нравится это.
  3. MSW

    MSW

    Регистр.:
    27 авг 2007
    Сообщения:
    491
    Симпатии:
    408
    с помощью 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
     
  4. ConstNW

    ConstNW Постоялец

    Регистр.:
    30 июн 2007
    Сообщения:
    132
    Симпатии:
    39
    если считать не время, а какие-то числа с требуемым шагом, то лучше чтонить свое сделать.

    ---------- 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 нравится это.
  5. MSW

    MSW

    Регистр.:
    27 авг 2007
    Сообщения:
    491
    Симпатии:
    408
    ConstNW,
    классно)) работает, спасибо большое! :)
    только с округлением нужно разобраться, потому что шаг счёта получается очень дробный))) там до сотен тысяч значений после запятой :)
    пусть оно такое дробное считает, но для вывода просто целую часть выводить нужно :)

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

    ConstNW Постоялец

    Регистр.:
    30 июн 2007
    Сообщения:
    132
    Симпатии:
    39
    Да, можно 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 нравится это.
  7. MSW

    MSW

    Регистр.:
    27 авг 2007
    Сообщения:
    491
    Симпатии:
    408
    ConstNW,
    спасибо :)

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

    ConstNW Постоялец

    Регистр.:
    30 июн 2007
    Сообщения:
    132
    Симпатии:
    39
    Смотри комментарии в коде))

    Код:
    //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 нравится это.
  9. MSW

    MSW

    Регистр.:
    27 авг 2007
    Сообщения:
    491
    Симпатии:
    408
    ConstNW,
    класс :)

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

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

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



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

    ConstNW Постоялец

    Регистр.:
    30 июн 2007
    Сообщения:
    132
    Симпатии:
    39
    number_format в js нет, но есть гугл в котором по запросу "javascript number_format" нужное решение первой ссылкой ;)

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