I am trying to add mas (thousand separator) for big numbers that use the follow counter function:

<script type='text/javascript'>
    $(window).load(function() {
        $('.Count').each(function() {
            var $this = $(this);
            jQuery({Counter: 0}).animate({Counter: $this.text()}, {
                duration: 1500,
                easing: 'swing',
                step: function() {
                    $this.text(Math.ceil(this.Counter));
                }
            });
        });
    });

Do I modify this particular formula or do I have to write an additional function that will handle the formatting?

I am trying to add mas (thousand separator) for big numbers that use the follow counter function:

<script type='text/javascript'>
    $(window).load(function() {
        $('.Count').each(function() {
            var $this = $(this);
            jQuery({Counter: 0}).animate({Counter: $this.text()}, {
                duration: 1500,
                easing: 'swing',
                step: function() {
                    $this.text(Math.ceil(this.Counter));
                }
            });
        });
    });

Do I modify this particular formula or do I have to write an additional function that will handle the formatting?

• javascript
• jquery
• formatting

• so what's the problem that you want to get solved? – Chanckjh Commented Dec 8, 2014 at 20:43
• I am trying to find a way to have my counter animation run on large numbers that use that use mas. – user3088202 Commented Dec 8, 2014 at 20:51

2 Answers 2

I had the same issue with large numbers inconsistently ending (ie. 550,000 was sometimes only counting as far as 549,826 or so).

Here's a simplified solution which toLocaleString function to add the decimal accordingly:

$('.js-count').each(function() {
   
   $(this).prop('Counter', 0).animate({
      
      Counter: $(this).data('number')
   }, {
      
      duration: 4000,
      easing: 'swing',
      step: function(now) {
         
         $(this).text(Math.ceil(now).toLocaleString('en'));
      }
   });
  
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="js-count" data-number="550000"></span>

I've also opted to use a data attribute to store the number. This way is a bit more bullet-proof. Relying on the content of the element can lead to miscalculating if the event fires more than once.

this might work

<script>
$(window).load(function() {
    $('.Count').each(function() {
        var $this = $(this);
        jQuery({Counter: 0}).animate({Counter: $this.text()}, {
            duration: 1500,
            easing: 'swing',
            step: function() {
                var num = Math.ceil(this.Counter).toString();
                if(Number(num) > 999){
                    while (/(\d+)(\d{3})/.test(num)) {
                        num = num.replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
                    }
                }
                $this.text(num);
            }
        });
    });
});
</script>