JQuery counter to count to target number

Question

I'm trying to find out if anyone knows about an existing jQuery plugin that will count to the target number at a given speed.

For example, take a look at the Google’s free storage number on the Gmail homepage under the heading that says “Plenty of space.” It has a start number in the <span> and slowly counts up every second.

I am looking for something like this, but I would like to indicate:

• Start number
• End number
• The time it takes to start from start to finish.
• A custom callback function that can be executed when the counter finishes.

Answer 1

In the end, I created my own plugin. Here it is in case this helps anyone:

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

Here is sample code on how to use it:

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

Check out the demo on JSFiddle: http://jsfiddle.net/YWn9t/

Answer 2

You can use jQuery aimate function

 // 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/

Answer 3

I created tiny code to do just that. This is not only for counting, but also for any task that must be performed at a given time. (say do something in 5 seconds):

• Demo page

• Github project

Demo code:

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

Answer 4

I don't know about plugins, but it should not be too complicated:

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

Using:

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

Example:

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

I think the use is self-explanatory; in this example, the counter will start at 1000 and count to 4500 in 8 seconds with an interval of 500 ms and will call the callback function when performing the count.

Answer 5

I don't know about any existing plugins, but it's pretty easy to write them yourself using JavaScript Sync Events .

Answer 6

Another approach. Use Tween.js for the counter. This allows the counter to slow down, accelerate, rebound and many other goodies, as the counter gets where it goes.

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

Enjoy :)

PS does not use jQuery - but obviously it can.

Answer 7

Need a break, so I put together the following. Not sure if it would be useful to create a plugin.

 <!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> 

Answer 8

Try jCounter , it has a customRange parameter where you can specify the start and end numbers, it can also count, including the reserve you want at the end.

Answer 9

Another way to do this without jQuery is to use the Greensock TweenLite JS library.

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

Answer 10

CodePen Working Example

For more github repo

 <!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> 

Answer 11

You can use jquery animate function to do this.

 $({ 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'); } }); 

Here is the original article http://mishelshaji.co.in/2018/animated-number-counter-using-jquery/