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

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

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

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

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

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

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

Ответы [ 11 ]

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

Я закончил тем, что создал свой собственный плагин. Вот, если это кому-нибудь поможет: 

(function($) {
    $.fn.countTo = function(options) {
        // merge the default plugin settings with the custom options
        options = $.extend({}, $.fn.countTo.defaults, options || {});

        // how many times to update the value, and how much to increment the value on each update
        var loops = Math.ceil(options.speed / options.refreshInterval),
            increment = (options.to - options.from) / loops;

        return $(this).each(function() {
            var _this = this,
                loopCount = 0,
                value = options.from,
                interval = setInterval(updateTimer, options.refreshInterval);

            function updateTimer() {
                value += increment;
                loopCount++;
                $(_this).html(value.toFixed(options.decimals));

                if (typeof(options.onUpdate) == 'function') {
                    options.onUpdate.call(_this, value);
                }

                if (loopCount >= loops) {
                    clearInterval(interval);
                    value = options.to;

                    if (typeof(options.onComplete) == 'function') {
                        options.onComplete.call(_this, value);
                    }
                }
            }
        });
    };

    $.fn.countTo.defaults = {
        from: 0,  // the number the element should start at
        to: 100,  // the number the element should end at
        speed: 1000,  // how long it should take to count between the target numbers
        refreshInterval: 100,  // how often the element should be updated
        decimals: 0,  // the number of decimal places to show
        onUpdate: null,  // callback method for every time the element is updated,
        onComplete: null,  // callback method for when the element finishes updating
    };
})(jQuery);

Вот пример кода, как его использовать: 

<script type="text/javascript"><!--
    jQuery(function($) {
        $('.timer').countTo({
            from: 50,
            to: 2500,
            speed: 1000,
            refreshInterval: 50,
            onComplete: function(value) {
                console.debug(this);
            }
        });
    });
//--></script>

<span class="timer"></span>

Просмотр демонстрации на JSFiddle: http://jsfiddle.net/YWn9t/

71 голосов
/ 04 февраля 2013

Вы можете использовать функцию jQuery animate 

// Enter num from and to
$({countNum: 99}).animate({countNum: 1000}, {
  duration: 8000,
  easing:'linear',
  step: function() {
    // What todo on every count
    console.log(Math.floor(this.countNum));
  },
  complete: function() {
    console.log('finished');
  }
});

http://jsbin.com/upazas/958/

12 голосов
/ 28 июля 2014

Я создал крошечный код, чтобы сделать именно это. Это не только для подсчета, но и для любой задачи, которая должна выполняться в течение определенного времени. (скажем, сделать что-то в течение 5 секунд):

Демонстрационный код: 

var step = function(t, elapsed){
    // easing 
    t = t*t*t;

    // calculate new value
    var value = 300 * t; // will count from 0 to 300

    // limit value ("t" might be higher than "1")
    if( t > 0.999 )
        value = 300;

    // print value (converts it to an integer)
    someElement.innerHTML = value|0;
};

var done = function(){
    console.log('done counting!');
};


// Do-in settings object
var settings = {
    step     : step,
    duration : 3,
    done     : done,
    fps      : 24 // optional. Default is requestAnimationFrame
};

// initialize "Do-in" instance 
var doin = new Doin(settings);
8 голосов
/ 29 марта 2010

Не знаю насчет плагинов, но это не должно быть слишком сложно: 

;(function($) {        
     $.fn.counter = function(options) {
        // Set default values
        var defaults = {
            start: 0,
            end: 10,
            time: 10,
            step: 1000,
            callback: function() { }
        }
        var options = $.extend(defaults, options);            
        // The actual function that does the counting
        var counterFunc = function(el, increment, end, step) {
            var value = parseInt(el.html(), 10) + increment;
            if(value >= end) {
                el.html(Math.round(end));
                options.callback();
            } else {
                el.html(Math.round(value));
                setTimeout(counterFunc, step, el, increment, end, step);
            }
        }            
        // Set initial value
        $(this).html(Math.round(options.start));
        // Calculate the increment on each step
        var increment = (options.end - options.start) / ((1000 / options.step) * options.time);            
        // Call the counter function in a closure to avoid conflicts
        (function(e, i, o, s) {
            setTimeout(counterFunc, s, e, i, o, s);
        })($(this), increment, options.end, options.step);
    }
})(jQuery);

Использование: 

$('#foo').counter({
    start: 1000,
    end: 4500,
    time: 8,
    step: 500,
    callback: function() {
        alert("I'm done!");
    }
});

Пример:

http://www.ulmanen.fi/stuff/counter.php

Я предполагаю, что использование говорит само за себя; в этом примере счетчик будет начинаться с 1000 и считать до 4500 через 8 секунд с интервалами в 500 мс, и будет вызывать функцию обратного вызова, когда подсчет завершен.

2 голосов
/ 10 июля 2012

Другой подход. Используйте Tween.js для счетчика. Это позволяет счетчику замедляться, ускоряться, подпрыгивать и убивать другие вкусности, когда счетчик добирается до места, где он движется.

http://jsbin.com/ekohep/2/edit#javascript,html,live

Наслаждайтесь:)

PS, не использует jQuery - но, очевидно, может.

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

Я не знаю ни о каких существующих плагинах, но, кажется, довольно легко написать их самостоятельно с помощью JavaScript Timing Events .

1 голос
/ 27 сентября 2012

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

0 голосов
/ 03 апреля 2019

CodePen Рабочий пример

Для получения дополнительной информации GitHub РЕПО 

<!DOCTYPE html>
<html>
<head>
    <title>Count Up Numbers Example</title>
    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>

    <style type="text/css">
        /* 
        Courtesy: abcc.com
        https://abcc.com/en
        https://abcc.com/en/at-mining 
        */
        .rewards {
            background-color: #160922;
        }

        .th-num-bold {
            font-family: "Arial" ;
        }

        .ff-arial {
            font-family: "Arial" ;
        }

        .scroll-wrap .scroll-exchange-fee .exchange_time {
            color: hsla(0,0%,100%,.7);
            font-size: 13px;
        }

        .f14 {
            font-size: 14px;
        }

        .flex {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

        .jcsb {
            -ms-flex-pack: justify!important;
            -webkit-box-pack: justify!important;
            justify-content: space-between!important;
        }

        .aic {
            -ms-flex-align: center!important;
            -webkit-box-align: center!important;
            align-items: center!important;
        }


        li {
            list-style: none;
        }

        .pull-left {
            float: left!important;
        }

        .rewards-wrap {
            height: 100%;
        }

        .at-equity-wrap .rewards .calculate_container {
            -webkit-box-shadow: rgba(0,0,0,.03) 0 5px 10px 0;
            background: url(https://s.abcc.com/portal/static/img/home-bg-pc.c9207cd.png);
            background-repeat: no-repeat;
            background-size: 1440px 100%;
            box-shadow: 0 5px 10px 0 rgba(0,0,0,.03);
            margin: 0 auto;
            max-width: 1200px;
            overflow: hidden;
            position: relative;
        }

        .rewards-pc-wrap .current-profit .point {
            color: #fff;
            font-size: 25px;
        }

        .rewards-pc-wrap .current-profit .integer {
            color: #fff;
            font-size: 45px;
        }

        .rewards-pc-wrap .current-profit .decimal {
            color: #fff;
            font-size: 25px;
        }

        .rewards-pc-wrap .current-profit .unit {
            color: #fff;
            font-size: 24px;
            margin-right: 5px;
            margin-top: 18px;
        }

        .rewards-pc-wrap .yesterday-profit .point {
            color: #fff;
            font-size: 25px;
        }

        .rewards-pc-wrap .yesterday-profit .integer {
            color: #fff;
            font-size: 45px;
        }

        .rewards-pc-wrap .yesterday-profit .decimal {
            color: #fff;
            font-size: 25px;
        }

        .rewards-pc-wrap .yesterday-profit .unit {
            color: #fff;
            font-size: 24px;
            margin-right: 5px;
            margin-top: 18px;
        }

        .rewards-pc-wrap .profit-rate-100 .point {
            color: #fff;
            font-size: 25px;
        }

        .rewards-pc-wrap .profit-rate-100 .integer {
            color: #fff;
            font-size: 45px;
        }

        .rewards-pc-wrap .profit-rate-100 .decimal {
            color: #fff;
            font-size: 25px;
        }

        .rewards-pc-wrap .profit-rate-100 .unit {
            color: #fff;
            font-size: 24px;
            margin-right: 5px;
            margin-top: 18px;
        }

        .rewards-pc-wrap .total-profit .point {
            color: #fff;
            font-size: 25px;
        }

        .rewards-pc-wrap .total-profit .integer {
            color: #fff;
            font-size: 45px;
        }

        .rewards-pc-wrap .total-profit .decimal {
            color: #fff;
            font-size: 25px;
        }

        .rewards-pc-wrap .total-profit .unit {
            color: #fff;
            font-size: 24px;
            margin-right: 5px;
            margin-top: 18px;
        }

        .rewards-pc-wrap {
            height: 400px;
            margin-left: 129px;
            padding-top: 100px;
            width: 630px;
        }

        .itm-rv {
            -ms-flex: 1;
            -webkit-box-flex: 1;
            flex: 1;
            font-family: "Arial";
        }

        .fb {
            font-weight: 700;
        }

        .main-p {
            color: hsla(0,0%,100%,.7);
            font-size: 13px;
            margin-bottom: 8px;
            margin-top: 10px;
        }

        .sub-p {
            color: hsla(0,0%,100%,.5);
            font-size: 12px;
            margin-top: 12px;
        }

        .fb-r {
            font-weight: 300;
        }

        .price-btc {
            color: hsla(0,0%,100%,.5);
            font-size: 13px;
            margin-top: 10px;
        }

    </style>
</head>
<body>
    <div class="at-equity-wrap">
        <div  class="rewards" >
            <div  class="calculate_container">
                <div  class="rewards-wrap">
                    <div class="flex jcc aic">
                        <div  class="rewards-pc-wrap slideInUp" id="nuBlock">
                            <div  class="flex jcsb aic">
                                <div  class="itm-rv" style="margin-right: 60px;">
                                    <div  class="current-profit th-num-bold fb"><span  class="unit pull-left">$</span> <span class="integer" id="cr_prft_int" >0</span> <span  class="point">.</span> <span class="decimal" id="cr_prft_dcml" >00</span></div>
                                    <p  class="main-p">Platform Rewards to Be Distributed Today</p>
                                    <p  class="sub-p fb-r">Total circulating KAT eligible for rewards:100,000,000</p>
                                </div>
                                <div  class="itm-rv">
                                    <div  class="profit-rate-100 th-num-bold"><span  class="unit pull-left">$</span> <span  class="integer" id="dly_prft_int" >0</span> <span  class="point">.</span><span  class="decimal" id="dly_prft_dcml" >00</span></div>
                                    <p  class="main-p">Daily Rewards of 1000 KAT</p>
                                    <div  class="profit-rate sub-p fb-r"><span >Daily KAT Rewards Rate</span> <span  class="integer">0</span> <span  class="decimal">.00</span> <span  class="unit">%</span></div>
                                </div>
                            </div>
                            <div  class="flex jcsb aic" style="margin-top: 40px;">
                                <div  class="itm-rv" style="margin-right: 60px;">
                                    <div  class="yesterday-profit th-num-bold fb'"><span  class="unit pull-left">$</span> <span  class="integer" id="ytd_prft_int" >0</span> <span  class="point">.</span><span  class="decimal" id="ytd_prft_dcml" >00</span></div>
                                    <div  class="price-btc fb-r">/ 0.00000000 BTC</div>
                                    <p  class="main-p fb-r">Platform Rewards Distributed Yesterday</p>
                                </div>
                                <div  class="itm-rv">
                                    <div  class="total-profit th-num-bold fb'"><span  class="unit pull-left">$</span> <span  class="integer" id="ttl_prft_int" >0</span> <span  class="point">.</span><span  class="decimal" id="ttl_prft_dcml" >00</span></div>
                                    <div  class="price-btc fb-r">/ 0.00000000 BTC</div>
                                    <p  class="main-p fb-r">Cumulative Platform Rewards Distributed</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">

    $(document).on('ready', function(){

        setTimeout(function(){ 
            cr_countUp();
            dly_countUp();
            ytd_countUp();
            ttl_countUp();
        }, 2000);

    });

    unit = "$";

    var cr_data, dly_data, ytd_data, ttl_data;
    cr_data = dly_data = ytd_data = ttl_data = ["670.0000682", "670.002", "660.000068", "660.002", "650.000000063", "650.01", "640.00000006", "640.01", "630.0000000602", "630.01", "620.0000000622", "620.01", "610.00000016", "610.002", "600.00000015998", "600.002", "590.00000094", "590.002", "580.0000009", "580.002", "760.0000682", "760.002", "660.000068", "660.002", "560.000000063", "560.01", "460.00000006", "460.01", "360.0000000602", "360.01", "260.0000000622", "260.01", "160.00000016", "160.002", "060.00000015998", "060.002", "950.00000094", "950.002", "850.0000009", "850.002"];

    cr_start = 0;
    cr_stop = cr_data.length - 1;
    cr_nu = 20;

    function cr_countUp(){
        setTimeout(function(){
            $("#cr_prft_int").text(cr_data[cr_start].split(".")[0]);
            $("#cr_prft_dcml").text(cr_data[cr_start].split(".")[1]);
            if(cr_start < cr_stop){
                cr_start += 1;
                cr_countUp();
            }
        }, cr_nu);
    }

    dly_start = 0;
    dly_stop = dly_data.length - 1;
    dly_nu = 20;

    function dly_countUp(){
        setTimeout(function(){
            $("#dly_prft_int").text(dly_data[dly_start].split(".")[0]);
            $("#dly_prft_dcml").text(dly_data[dly_start].split(".")[1]);
            if(dly_start < dly_stop){
                dly_start += 1;
                dly_countUp();
            }
        }, dly_nu);
    }

    ytd_start = 0;
    ytd_stop = ytd_data.length - 1;
    ytd_nu = 20;

    function ytd_countUp(){
        setTimeout(function(){
            $("#ytd_prft_int").text(ytd_data[ytd_start].split(".")[0]);
            $("#ytd_prft_dcml").text(ytd_data[ytd_start].split(".")[1]);
            if(ytd_start < ytd_stop){
                ytd_start += 1;
                ytd_countUp();
            }
        }, ytd_nu);
    }

    ttl_start = 0;
    ttl_stop = ttl_data.length - 1;
    ttl_nu = 20;

    function ttl_countUp(){
        setTimeout(function(){
            $("#ttl_prft_int").text(ttl_data[ttl_start].split(".")[0]);
            $("#ttl_prft_dcml").text(ttl_data[ttl_start].split(".")[1]);
            if(ttl_start < ttl_stop){
                ttl_start += 1;
                ttl_countUp();
            }
        }, ttl_nu);

    }
</script>
</html>
0 голосов
/ 27 августа 2018

Для этого вы можете использовать функцию jquery animate. 

$({ countNum: $('.code').html() }).animate({ countNum: 4000 }, {
        duration: 8000,
        easing: 'linear',
        step: function () {
        $('.code').html(Math.floor(this.countNum) );
        },
        complete: function () {
        $('.code').html(this.countNum);
        //alert('finished');
        }
    });

Вот оригинальная статья http://mishelshaji.co.in/2018/animated-number-counter-using-jquery/

0 голосов
/ 19 августа 2015

Еще один способ сделать это без jQuery - использовать библиотеку Greensock TweenLite JS.

Демо http://codepen.io/anon/pen/yNWwEJ

var display = document.getElementById("display");
var number = {param:0};
var duration = 1;

function count() {
  TweenLite.to(number, duration, {param:"+=20", roundProps:"param",
  onUpdate:update, onComplete:complete, ease:Linear.easeNone});
}

function update() {
  display.innerHTML = number.param;
}

function complete() {
  //alert("Complete");
}

count();
Страница:
...