0

So this script counts up to the number I add to the span, but I wand to add a comma after to the 11,000.

If tried adding toFixed but it hasn't help: $(this).text(Math.ceil(now).toFixed(3));

$('.counter').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 7000,
    easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now));
      stop();
      $(this).removeClass('counter');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div class="number">
    <span class="count counter">100</span>
  </div>
  <div class="number">
    <span class="count counter">11000</span>
  </div>
Mureinik
  • 297,002
  • 52
  • 306
  • 350
Aaron
  • 10,187
  • 3
  • 23
  • 39

2 Answers2

5

You could use toLocalString():

$('.counter').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 7000,
    easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now).toLocaleString());
      // Here --------------------^
      stop();
      $(this).removeClass('counter');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div class="number">
    <span class="count counter">100</span>
  </div>
  <div class="number">
    <span class="count counter">11000</span>
  </div>
Mureinik
  • 297,002
  • 52
  • 306
  • 350
0

use this function:

$.fn.digits = function(){ 
    return this.each(function(){ 
        $(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") ); 
    })
}

and then:

$(".count counter").digits();

You can also use this simple code to do the same:

$(this).text(now.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
Koby Douek
  • 16,156
  • 19
  • 74
  • 103