format string decimal and thousands separator javascript

Question

I made two simple counters with jQuery. Now I try to chance the appearance of these counters.

My first counter looks like "23000" right now. But for a better overview I'd like to add a dot. "23.000" I already tried do pretend it as a decimal number: Counting up to 23 with 3 digits but then the counters starts with "0.000" and it doesn't show the "000" after finished.

Second: My counter looks like "15.06" and I'd like to change the dot with a comma like: "15,06"

Can someone help me?

jQuery(document).ready(function () {

    function counter01() {
        $('#01').each(function () {
            var start = $(this).data("start")
            var speed = $(this).data("speed")
            $("#01").prop('end', start).animate({
                end: $(this).data("end")
            }, {
                duration: speed,
                step: function (now) {
                    $(this).text(Math.round(now * 1) / 1);
                }
            });
        });
    }
    
    counter01();

    function counter02() {
        $('#02').each(function () {
            var start = $(this).data("start")
            var speed = $(this).data("speed")
            $("#02").prop('end', start).animate({
                end: $(this).data("end")
            }, {
                duration: speed,
                step: function (now) {
                    $(this).text(Math.round(now * 100) / 100);
                }
            });
        });
    }
    
    counter02();
    
     function counter03() {
        $('#03').each(function () {
            var start = $(this).data("start")
            var speed = $(this).data("speed")
            $("#03").prop('end', start).animate({
                end: $(this).data("end")
            }, {
                duration: speed,
                step: function (now) {
                    $(this).text(Math.round(now * 1000) / 1000);
                }
            });
        });
    }
    
    counter03();
    
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div class="wrapper" style=" width: 30%; margin: 10px auto;float:left;">

        <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it looks right now</p>
        <h3 id="01" class="zaehler" data-start="0" data-end="23000" data-speed="5000" style="font-size: 3em;line-height: 1em;color: red;text-align: center;margin: 5px;">23000</h3>
        <h3 id="03" class="zaehler" data-start="0" data-end="23.000" data-speed="5000" style="font-size: 3em;line-height: 1em;color: red;text-align: center;margin: 5px;">23.000</h3>
        <p>&nbsp;</p>
        <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it should look</p>
        <h3 class="" data-start="0" data-end="23000" data-speed="3000" style="font-size: 3em;line-height: 1em;color: green;text-align: center;margin: 5px;">23.000</h3>
        

    </div>
    
      <div class="wrapper" style=" width: 30%; margin: 10px auto;float:left;">

        <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it looks right now</p>
        <h3 id="02" class="zaehler" data-start="0" data-end="15.06" data-speed="2000" style="font-size: 3em;line-height: 1em;color: red;text-align: center;margin: 5px;">15,06</h3>
        <p>&nbsp;</p>
        <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it should look</p>
        <h3 class="" data-start="0" data-end="23000" data-speed="3000" style="font-size: 3em;line-height: 1em;color: green;text-align: center;margin: 5px;">15,06</h3>

    </div>
    

</body>

Alexandre Elshobokshy · Accepted Answer · 2019-01-24 09:09:12Z

Here's a modified number_format() function that does the conversion directly for you :

function number_format(number, decimals, dec_point) {
  // Strip all characters but numerical ones.
  number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
  var n = !isFinite(+number) ? 0 : +number,
    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
    sep = '.',
    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
    s = '',
    toFixedFix = function(n, prec) {
      var k = Math.pow(10, prec);
      return '' + Math.round(n * k) / k;
    };
  // Fix for IE parseFloat(0.55).toFixed(0) = 0;
  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
  if (s[0].length > 3) {
    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
  }
  if ((s[1] || '').length < prec) {
    s[1] = s[1] || '';
    s[1] += new Array(prec - s[1].length + 1).join('0');
  }
  return s.join(dec);
}

You can see it work here :

function number_format(number, decimals, dec_point) {
  // Strip all characters but numerical ones.
  number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
  var n = !isFinite(+number) ? 0 : +number,
    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
    sep = '.',
    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
    s = '',
    toFixedFix = function(n, prec) {
      var k = Math.pow(10, prec);
      return '' + Math.round(n * k) / k;
    };
  // Fix for IE parseFloat(0.55).toFixed(0) = 0;
  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
  if (s[0].length > 3) {
    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
  }
  if ((s[1] || '').length < prec) {
    s[1] = s[1] || '';
    s[1] += new Array(prec - s[1].length + 1).join('0');
  }
  return s.join(dec);
}

jQuery(document).ready(function() {

  function counter01() {
    $('#01').each(function() {
      var start = $(this).data("start")
      var speed = $(this).data("speed")
      $("#01").prop('end', start).animate({
        end: $(this).data("end")
      }, {
        duration: speed,
        step: function(now) {
          $(this).text(number_format(Math.round(now * 1) / 1), 0, '', '.');
        }
      });
    });
  }

  counter01();

  function counter02() {
    $('#02').each(function() {
      var start = $(this).data("start")
      var speed = $(this).data("speed")
      $("#02").prop('end', start).animate({
        end: $(this).data("end")
      }, {
        duration: speed,
        step: function(now) {
          $(this).text(number_format(Math.round(now * 100) / 100, 2, ',', '.'));
        }
      });
    });
  }

  counter02();

  function counter03() {
    $('#03').each(function() {
      var start = $(this).data("start")
      var speed = $(this).data("speed")
      $("#03").prop('end', start).animate({
        end: $(this).data("end")
      }, {
        duration: speed,
        step: function(now) {
          $(this).text(Math.round(now * 1000) / 1000);
        }
      });
    });
  }

  counter03();


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="wrapper" style=" width: 30%; margin: 10px auto;float:left;">

    <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it looks right now</p>
    <h3 id="01" class="zaehler" data-start="0" data-end="23000" data-speed="5000" style="font-size: 3em;line-height: 1em;color: red;text-align: center;margin: 5px;">23000</h3>
    <h3 id="03" class="zaehler" data-start="0" data-end="23.000" data-speed="5000" style="font-size: 3em;line-height: 1em;color: red;text-align: center;margin: 5px;">23.000</h3>
    <p>&nbsp;</p>
    <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it should look</p>
    <h3 class="" data-start="0" data-end="23000" data-speed="3000" style="font-size: 3em;line-height: 1em;color: green;text-align: center;margin: 5px;">23.000</h3>


  </div>

  <div class="wrapper" style=" width: 30%; margin: 10px auto;float:left;">

    <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it looks right now</p>
    <h3 id="02" class="zaehler" data-start="0" data-end="15.06" data-speed="2000" style="font-size: 3em;line-height: 1em;color: red;text-align: center;margin: 5px;">15,06</h3>
    <p>&nbsp;</p>
    <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it should look</p>
    <h3 class="" data-start="0" data-end="23000" data-speed="3000" style="font-size: 3em;line-height: 1em;color: green;text-align: center;margin: 5px;">15,06</h3>

  </div>


</body>

Thank you so much, this is very helpful. Is a combination also possible like: 23.000,57 ? :)

Collectives™ on Stack Overflow

format string decimal and thousands separator javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related