Lost trying to create a stopwatch

Question

I'm trying to self-taugh JavaScript and while doing some texts with a stopwatch I got lost into this problem. It's working but it's always starting on 95:34:47 instead of 00:00:00

This is what i tried so far.

    <script>
        /*Timer Stuff*/
        function pad(num, size) {
            var s = "0000" + num;
            return s.substr(s.length - size);
        } 
        function formatTime(time) {
            var h = m = s = ms = 0;
            var newTime = '';

            h = Math.floor( time / (60 * 60 * 1000) );
            time = time % (60 * 60 * 1000);
            m = Math.floor( time / (60 * 1000) );
            time = time % (60 * 1000);
            s = Math.floor( time / 1000 );
            ms = time % 1000;

            newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2) + ':' + pad(ms, 3);
            return newTime;
        } 

        function update() {
            var d = new Date();
            var n = d.getTime();
            document.getElementById("time").innerHTML = formatTime(n);
        }

        function start() {
            MyVar = setInterval(update, 1);
        }
    </script>
</head>
<body>
        <div>Time: <span id="time"></span></div>
        <input type="button" value="start" onclick="start();">
</body>

I understand that I need to subtract an specific amount of time to match the timer accurately, however I can't figure out how to do it.

Take a look here: http://stackoverflow.com/a/20319035/1887101 — Adjit, Mar 30 '15 at 19:48
Thank you for the answer. Although that's a little bit too confusing for a newbie like me and I was looking for something that wouldn't require to remove my entire code. Nevertheless, I will try to understand how it works, thanks. — Saelyth, Mar 30 '15 at 19:52

score 3 · Accepted Answer · answered Mar 30 '15 at 19:50

You need to store a variable with the start time, and subtract from that. The 95 you're getting for the hours is actually much higher, just being cropped, being that you're calculating from the Unix epoch.

I would just do it something like this:

    function update() {
        var d = new Date();
        var n = d - startTime;
        document.getElementById("time").innerHTML = formatTime(n);
    }

    function start() {
        startTime = new Date();
        MyVar = setInterval(update, 1);
    }

Note that you don't even need to use d.getTime() when subtracting -- you can just subtract Date objects themselves.

score 1 · Answer 2 · answered Mar 30 '15 at 19:50

You have to introduce a start-time variable. In every update-step you have to get the difference from start to now.

For your code:

    <script>
    /*Timer Stuff*/
    timestart = new Date();
    timestart_time = timestart.getTime();

    function pad(num, size) {
        var s = "0000" + num;
        return s.substr(s.length - size);
    } 
    function formatTime(time) {
        time = time -timestart_time;
        var h = m = s = ms = 0;
        var newTime = '';

        h = Math.floor( time / (60 * 60 * 1000) );
        time = time % (60 * 60 * 1000);
        m = Math.floor( time / (60 * 1000) );
        time = time % (60 * 1000);
        s = Math.floor( time / 1000 );
        ms = time % 1000;

        newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2) + ':' + pad(ms, 3);
        return newTime;
    } 

    function update() {
        var d = new Date();
        var n = d.getTime();
        document.getElementById("time").innerHTML = formatTime(n);
    }

        function start() {
            MyVar = setInterval(update, 1);
        }
    </script>
</head>
<body>
        <div>Time: <span id="time"></span></div>
        <input type="button" value="start" onclick="start();">
</body>

That works for me :)

Lost trying to create a stopwatch

2 Answers2