Adding commas to animated counting function

Question

I've tried everything I can find online about this but they all seem to deal with static numbers, not animated numbers.

Is it possible to have commas added to my values as the number increases using this by modifying this function?

$('.counter').each(function() {
        var $this = $(this),
            countTo = $this.attr('data-count');

        $({ countNum: $this.text()}).animate({
            countNum: countTo
        },

        {

        duration: 500,
        easing:'linear',
        step: function() {
            $this.text(Math.floor(this.countNum));
        },
        complete: function() {
            $this.text(this.countNum);
              //alert('finished');
        }

    });

well you guys want to be funny men and grammar nazis today. can you read javascript? if you don't understand that this script animates a count from 0 to a number defined in an html data attribute then you probably can't answer my question to begin with. — JSum, Apr 19 '17 at 19:09
@JSum, editing other users' questions for grammar and clarity is a well-established part of how SO works. Getting snippy about it is a very good way to not get your question answered (if I'd seen your comment before answering, I wouldn't have taken the time to help you.) — Daniel Beck, Apr 19 '17 at 19:10
I've asked tons of questions here and this is the first time I have ever been down voted for accidental grammar mistakes. You answered, and it worked, good enough for me. — JSum, Apr 19 '17 at 19:13
I've answered tons of questions here and this is the first time I've had the asker be quite so rude about it. — Daniel Beck, Apr 19 '17 at 19:16

score 8 · Accepted Answer · edited May 23 '17 at 10:31

Just add the commas wherever you're currently setting the element text().

Comma code lifted from add commas to a number in jQuery

$('.counter').each(function() {
  var $this = $(this),
    countTo = $this.attr('data-count');

  $({
    countNum: $this.text()
  }).animate({
      countNum: countTo
    },

    {
      duration: 5000,
      easing: 'linear',
      step: function() {
        $this.text(commaSeparateNumber(Math.floor(this.countNum)));
      },
      complete: function() {
        $this.text(commaSeparateNumber(this.countNum));
        //alert('finished');
      }
    }
  );

});

function commaSeparateNumber(val) {
  while (/(\d+)(\d{3})/.test(val.toString())) {
    val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
  }
  return val;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="counter" data-count="1000000"></span>

This code works better than many github counter projects and it is very lightweight. Thanks! — Xel Naga, Aug 05 '20 at 20:49

score 4 · Answer 2 · answered Jan 24 '20 at 12:44

Use parseFloat in case of string contain comma. please check the below working code

$('.counter').each(function() {
    $(this).prop('Counter', 0).animate({
        Counter: parseFloat($(this).text().replace(/,/g, ''))
    }, {
        duration: 10000,
        easing: 'swing',
        step: function(now) {
            $(this).text(getRupeesFormat(Math.ceil(now)));
        }
    });
});


function getRupeesFormat(val) {
    while (/(\d+)(\d{3})/.test(val.toString())) {
        val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
    }
    return val;
}

Adding commas to animated counting function

2 Answers2