jQuery Count Numbers Up

Question

I'm not any good at javascript, but I'd love to have a nice little animation that counts a number upwards. I've found this on Github, but it's way to slow. (I'm counting a number with 10 decimals). Anyone got any tips on how to modify it, so it counts quicker? (I've tried to decrease the data-interval, but it sort of stagnates at "0".

<p class="counter" data-interval="0" data-format="999999" data-stop="193847"></p>

The second example on that page seems to count pretty fast. Copy it and add more digits. — Barmar, May 09 '13 at 17:29
Well, now it takes like minutes to count up, I'd prefer it to take only a few seconds. — Mats, May 09 '13 at 17:33
You could write your own using [setInterval](https://developer.mozilla.org/en-US/docs/DOM/window.setInterval) — Blazemonger, May 09 '13 at 17:34
@Mats, are you trying to count from 0 to 193847 in a few seconds? — John Boker, May 09 '13 at 17:37
@Mats, unless you modify the step count i dont think it'll be possible with javascript, have a look at http://stackoverflow.com/questions/5298999/speed-up-setinterval — John Boker, May 09 '13 at 17:43
@JohnBoker: Thanks. This fiddle here (http://jsfiddle.net/YWn9t/4/) seems to achieve what I want, it's just that I'd love for it to count several numbers at the same time. Maybe that's a clue? — Mats, May 09 '13 at 17:48
@Mats, like i said, unless you modify the step... in that example it's counting by what's needed to get to the end value in 5 seconds. — John Boker, May 09 '13 at 17:50
@Mats, can you just use that example and change the start and end and the time you want it to count, ie: http://jsfiddle.net/YWn9t/6/ — John Boker, May 09 '13 at 17:52

Shankar Prakash G · Answer 1 · 2018-04-12T11:02:42.317

This will help you and simple too, You can change speed by changing duration and change starting number by changing Counter : 0

$('.count').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: $this.attr('data-stop') }, {
    duration: 1000,
    easing: 'swing',
    step: function (now) {
      $this.text(Math.ceil(now));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="count" data-stop="193847">193847</span>
<br/>
<span class="count" data-stop="190">190</span>
<br/>
<span class="count" data-stop="1938">1938</span>

great great idea – Faisal Mehmood Awan Apr 11 '20 at 03:36 — Faisal Mehmood Awan, Apr 11 '20 at 03:36

score 5 · Accepted Answer · answered May 10 '13 at 08:08

5

I found the perfect solution:

https://github.com/mhuggins/jquery-countTo

answered May 10 '13 at 08:08

Mats

557
2
5
15

score 3 · Answer 3 · answered May 09 '13 at 18:37

Lets say you wanted to count up to 200,000 in 5 seconds.

that would be 40,000 increments a second or 40,000 in 60,000 milliseconds, which would be an interval of 1.5 ms per iteration.

Most likely any browser you're using wont be able to handle that kind of interval. The best way to do this would probably determine how fast you want it to count to your end value and change the step so you can get there in the correct amount of time given a more sane interval.

for example, say 5000ms is how long you want it to take and you want your interval to be 20ms.

given that you have 5000/20 or 250 steps. you would have to count by 200000/250 or 800 to get to your ending value in 5 seconds.

score 2 · Answer 4 · answered Jul 24 '13 at 18:03

You don't need a jQuery plugin, just use .animate:

jQuery('.counter').each(function(){
  var $elm = this;
  var from = {property: 0};
  var to = {property: $elm.data('stop')};
  var duration = $elm.data('duration');

  jQuery(from).animate(to, {
      duration: duration,
      step: function() {
          $elm.html(this.property);
      }
  });
});

Tip: You can optimize jQuery's framerate by setting jQuery.fx.interval, by default it is 13 (ms).

For more examples: http://james.padolsey.com/javascript/fun-with-jquerys-animate/

score 0 · Answer 5 · answered May 09 '13 at 17:32

From the plugin you've posted, there seems to be an option named interval. Default is 1000 ms, try to decrease it so it counts faster.

Something like that should do the trick :

<span></span>

<script>
$('span').addClass('counter counter-analog')
         .counter({
   // several options here
    interval: 1,
    });

</script>

Hope it helps!

score 0 · Answer 6 · answered Oct 22 '13 at 15:37

If someone wants to increase counter with certain increment then use,

// HTML

<span class="stat-count">10000</span>

// JS

$(function() {
    function count($this){
        var current = parseInt($this.html(), 10);
        current = current + 50; /* Where 50 is increment */

    $this.html(++current);
    if(current > $this.data('count')){
        $this.html($this.data('count'));
    } else {    
        setTimeout(function(){count($this)}, 5);
    }
}        

$(".stat-count").each(function() {
  $(this).data('count', parseInt($(this).html(), 10));
  $(this).html('0');
  count($(this));
 });

});

Jquery count numbers on page load with certain limit, counting time and counting increment.

jQuery Count Numbers Up

6 Answers6

Linked