Add periods to a number

Question

I've got this script that increments a fixed number.

var START_DATE = new Date("January 1, 2014 00:00:00");
var INTERVAL = 10;
var INCREMENT = 1;
var START_VALUE = 12345678;
var count = 0;

$(document).ready(function() {
    var msInterval = INTERVAL * 1000;
    var now = new Date();
    count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE;
    document.getElementById('counter').innerHTML = count;

    window.setInterval( function(){
        count += INCREMENT; 
        document.getElementById('counter').innerHTML = count;
    }, msInterval);

});

And on my HTML I've got the following:

<div id="counter"></div>

Every 10 seconds my initial number increases by one unit. So it comes out something like 12345678, which isn't easy to read. I'd like it to have some periods every three units. Something like 12.345.678.

What do I need to add to the script so that the final number comes out that way?

Thank you.

possible duplicate of [Add comma to numbers every three digits using jQuery](http://stackoverflow.com/questions/1990512/add-comma-to-numbers-every-three-digits-using-jquery) and [Add commas to a number in jquery](http://stackoverflow.com/questions/3883342/add-commas-to-a-number-in-jquery) — mplungjan, Apr 16 '15 at 14:09
I pointed you to TWO :) Just change commas to periods and change to `$('#counter').text(formatNumber(count));` — mplungjan, Apr 16 '15 at 14:10
and may well be http://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript — Praveen Puglia, Apr 16 '15 at 14:44

score 1 · Accepted Answer · edited May 23 '17 at 12:06

Using add commas to a number in jQuery You get something like

var START_DATE = new Date("January 1, 2014 00:00:00");
var INTERVAL = 1;
var INCREMENT = 1;
var START_VALUE = 12345678;
var count = 0;
var msInterval = INTERVAL * 1000;
var now = new Date();
var count = parseInt((now - START_DATE) / msInterval) * INCREMENT + START_VALUE

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


function countIt() {
  count += INCREMENT;
  $('#counter').text(formatDot(count));

}



$(function() {
  countIt();
  setInterval(countIt, msInterval);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="counter"></div>

Ended up changing this line: `val = val.toString().replace(/(\d+)(\d{3})/, '$1' + '.' + '$2');` with `val = val.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ".");`. The former was causing my number to slightly jump horizontally with each increment. — LPDuarte, Apr 16 '15 at 15:08

Zach Leighton · Answer 2 · 2015-04-16T14:26:23.430

You can just use some function calls that format your number.

$(document).ready(function() {
    var msInterval = INTERVAL * 1000;
    var now = new Date();
    count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE;
    document.getElementById('counter').innerHTML = formatNumber(count);

    window.setInterval( function(){
        count += INCREMENT; 
        document.getElementById('counter').innerHTML = formatNumber(count);
    }, msInterval);

});

function formatNumber(n){
    return Number(n.toFixed(1)).toLocaleString()
}
function formatNumberPeriods(n){
    return formatNumber(n).replace(/,/g,'.');   
}

Example: http://jsfiddle.net/0tx1yLnu/3/

return Number(n).toLocaleString() does the same as the longer code — mplungjan, Apr 16 '15 at 18:46

Add periods to a number

2 Answers2