counter number adds 1 every six seconds - counter

Question

I would like a counter. The starting number will be:
10,000,000
Every 6 seconds, it will add 1, so it will be: 10,000,001 and then 10,000,002 and so on...
I would like to able to style the number: font-family, color, font-size, etc.
Can some please help me?

Answer 1

jQuery includes a function called setTimeout(), which causes a function to be called after a set time-delay. Something like the following would do what you are asking. Ensure that your document includes a DOM element with the id counter. Then:
var counter = 10000000;
function incrementCounter() {
counter++;
$('#counter').html(counter);
setTimeout(incrementCounter, 6000);
}
setTimeout(incrementCounter, 6000);
What’s going on here? setTimeout takes two arguments: the function to be called and the time-delay in milliseconds. The final line sets the function incrementCounter(), which we defined, to run after a delay of six seconds. The function increments the counter variable, sets the DOM object’s text to the value of the counter variable, then sets the timeout again: this means that the function will run every six seconds until something stops it.
As for styling the counter, this can be done either using static CSS or with the jQuery style-manipulation functions.

Answer 2

You can make use of setInterval to initiate a function which would be invoked in every 6000 milliseconds.
var num = 10000000;
setInterval(function()
{
num++;
console.log(num);
$('div').text(num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
},6000);
Here's an example : https://jsfiddle.net/DinoMyte/sac63azn/3/