How to make real time count up with Javascript?

Question

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Count up</title>
</head>
<body>



<h1>number 1</h1>
<div id="counter"></div>

<br>

<h1>number 2</h1>
<div id="counter_2"></div>




<script>

    var START_DATE = new Date("July 2, 2015 11:00:00"); // put in the starting date here
    var INTERVAL = 0.366; // in seconds
    var INCREMENT = 1; // increase per tick
    var START_VALUE = 7325698160; // initial value when it's the start date
    var count = 0;

    window.onload = function ()
    {
        var msInterval = INTERVAL * 1000;
        var now = new Date();
        count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE;
        document.getElementById('counter').innerHTML = count;
        setInterval("count += INCREMENT; document.getElementById('counter').innerHTML = count;", msInterval);
    }




    var START_DATE_2 = new Date("July 2, 2015 11:00:00"); // put in the starting date here
    var INTERVAL_2 = 0.366; // in seconds
    var INCREMENT_2 = 1; // increase per tick
    var START_VALUE_2 = 738160; // initial value when it's the start date
    var count_2 = 0;

    window.onload = function ()
    {
        var msInterval = INTERVAL_2 * 1000;
        var now = new Date();
        count_2 = parseInt((now - START_DATE_2)/msInterval) * INCREMENT_2 + START_VALUE_2;
        document.getElementById('counter_2').innerHTML = count;
        setInterval("count_2 += INCREMENT_2; document.getElementById('counter_2').innerHTML = count_2;", msInterval);
    }
</script>

</body>
</html>

I had this count up, it worked well for just one number. However, when I was tying to add more, it did not work very well. It just display the second function. Anybody could help me out?? Thanks a lot!!!!

The second one sort of override the first one? – zikai wang Jul 02 '15 at 06:02 — zikai wang, Jul 02 '15 at 06:02

score 2 · Accepted Answer · answered Jul 02 '15 at 06:02

2

You overwrite window.onload handler with the second one. If you want to asssign multiple event handlers for the same event use addEventListener method:

window.addEventListener('load', function() {
    var msInterval = INTERVAL_2 * 1000;
    var now = new Date();
    count_2 = parseInt((now - START_DATE_2) / msInterval) * INCREMENT_2 + START_VALUE_2;
    document.getElementById('counter_2').innerHTML = count;
    setInterval("count_2 += INCREMENT_2; document.getElementById('counter_2').innerHTML = count_2;", msInterval);
});

answered Jul 02 '15 at 06:02

dfsq

191,768
25
236
258

Thanks! But I am new to js, so I don't exactly know how to do that. Could you write an example for me? – zikai wang Jul 02 '15 at 06:04
Thanks a lot. I have another question: How to add comma to the number that is displayed? For example: 122,343,345 – zikai wang Jul 02 '15 at 06:13
Check some of this answers: [this](http://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript) or [this](http://stackoverflow.com/questions/16902924/javascript-number-formatting-with-commas) – dfsq Jul 02 '15 at 06:16
Sorry, I did not understand these two Could you just add it to my code? Thank you very much!!! – zikai wang Jul 02 '15 at 06:25

How to make real time count up with Javascript?

1 Answers1