Счетчик jQuery для подсчета до целевого числа - PullRequest
Новая
       69

Счетчик jQuery для подсчета до целевого числа

45 голосов
/ 29 марта 2010

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

Например, посмотрите на количество бесплатных мегабайт Google, хранящихся на домашней странице Gmail , под заголовком «Много места». У него есть начальный номер в теге <span>, и он медленно увеличивается вверх каждую секунду.

Я ищу что-то подобное, но я бы хотел указать:

  • Стартовый номер
  • Конечный номер
  • Количество времени, которое требуется, чтобы пройти от начала до конца.
  • Пользовательская функция обратного вызова, которая может выполняться после завершения счетчика.

Ответы [ 11 ]

0 голосов
/ 29 марта 2010

Нужен был перерыв, поэтому я собрал следующее. Не уверен, что стоило бы создать плагин из. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            Counter
        </title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
        <script type="text/javascript">
            //<![CDATA[
                function createCounter(elementId,start,end,totalTime,callback)
                {
                    var jTarget=jQuery("#"+elementId);
                    var interval=totalTime/(end-start);
                    var intervalId;
                    var current=start;
                    var f=function(){
                        jTarget.text(current);
                        if(current==end)
                        {
                            clearInterval(intervalId);
                            if(callback)
                            {
                                callback();
                            }
                        }
                        ++current;
                    }
                    intervalId=setInterval(f,interval);
                    f();
                }
                jQuery(document).ready(function(){
                    createCounter("counterTarget",0,20,5000,function(){
                        alert("finished")
                    })
                })
            //]]>
        </script>
    </head>
    <body>
        <div id="counterTarget"></div>
    </body>
</html>
Страница:
...