Add units to counter dynamically (K, L, M)

Question

I'm working on the counter using jquery. Now I'm trying to add units like K, L, M I got a script but how to implement in my code I unable to find out. My initial code:

$('.count').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 4000,
    easing: 'swing',
    step: function(num) {
      $(this).text(Math.ceil(num));
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div><span class="count">2000</span></div>
<div><span class="count">1000</span></div>

This the link I found on the StackOverflow I want to implement in my code Found link on stack and I had tried like this

$('.count').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 4000,
    easing: 'swing',
    step: function(num) {
      $(this).text(Math.ceil(num));
      if (num >= 1000000000) {
        //$(this).text(Math.ceil(num));
        return (num / 1000000000).toFixed(1).replace(/\.0$/, '') + 'G';
      }
      if (num >= 1000000) {
        //$(this).text(Math.ceil(num));
        return (num / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
      }
      if (num >= 100000) {
        //$(this).text(Math.ceil(num));
        return (num / 100000).toFixed(1).replace(/\.0$/, '') + 'L';
      }
      if (num >= 1000) {
        //$(this).text(Math.ceil(num));
        return (num / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
      }
      return num;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div><span class="count">2000</span></div>
<div><span class="count">1000</span></div>

Here counter is working fine but units are not added Can anyone suggest how to append these units.

score 3 · Answer 1 · answered Jun 25 '19 at 08:50

It's because you update view first ($(this).text(Math.ceil(num));) and only then do calculations. Check my update:

$('.count').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 4000,
    easing: 'swing',
    step: function(num) {
      var unit = Math.ceil(num);

      if (num >= 1000000000) {
        //$(this).text(Math.ceil(num));
        unit = (num / 1000000000).toFixed(1).replace(/\.0$/, '') + 'G';
      } else if (num >= 1000000) {
        //$(this).text(Math.ceil(num));
        unit = (num / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
      } else if (num >= 100000) {
        //$(this).text(Math.ceil(num));
        unit = (num / 100000).toFixed(1).replace(/\.0$/, '') + 'L';
      } else if (num >= 1000) {
        //$(this).text(Math.ceil(num));
        unit = (num / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
      }

      $(this).text(unit);
      return num;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div><span class="count">5000000000</span></div>
<div><span class="count">2000</span></div>
<div><span class="count">1000</span></div>

score 2 · Accepted Answer · answered Jun 25 '19 at 09:01

That's becouse you do the calculations after you update the text with this line $(this).text(Math.ceil(num));

Also it seems like the code you got from stackoverflow should be in a function

$('.count').each(function() {
  function formatNum(num){
    if (num >= 1000000000) {
      //$(this).text(Math.ceil(num));
      return (num / 1000000000).toFixed(1).replace(/\.0$/, '') + 'G';
    }
    if (num >= 1000000) {
      //$(this).text(Math.ceil(num));
      return (num / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
    }
    if (num >= 100000) {
      //$(this).text(Math.ceil(num));
      return (num / 100000).toFixed(1).replace(/\.0$/, '') + 'L';
    }
    if (num >= 1000) {
      //$(this).text(Math.ceil(num));
      return (num / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
    }
    return num;
  }
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 4000,
    easing: 'swing',
    step: function(num) {
      $(this).text(formatNum(Math.ceil(num)));
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div><span class="count">2000</span></div>
<div><span class="count">1000</span></div>

Ehcnalb · Answer 3 · 2019-06-25T09:14:31.483

$('.count').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 4000,
    easing: 'swing',
    step: function(num) {
      //$(this).text(Math.ceil(num));
      if (num >= 1000000000) {
         $(this).text((num / 1000000000).toFixed(1).replace(/\.0$/, '') + 'G');       
        return (num / 1000000000).toFixed(1).replace(/\.0$/, '') + 'G';
      }
      if (num >= 1000000) {
         $(this).text((num / 1000000).toFixed(1).replace(/\.0$/, '') + 'M');
        return (num / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
      }
      if (num >= 100000) {
         $(this).text((num / 100000).toFixed(1).replace(/\.0$/, '') + 'L');
        return (num / 100000).toFixed(1).replace(/\.0$/, '') + 'L';
      }
      if (num >= 1000) {
        $(this).text((num / 1000).toFixed(1).replace(/\.0$/, '') + 'K');
        return (num / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
      }
      $(this).text(Math.ceil(num));
      return num;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div><span class="count">2000</span></div>
<div><span class="count">1000</span></div>

Add units to counter dynamically (K, L, M)

3 Answers3