How to format the elapsed time of setInterval method JavaScript

Question

I have a simple setInterval setup like so:

var time = 0;
function a(){
    window.setInterval(timer, 1000);
}

Which executes this function:

function timer() {
    time +=1;
    document.getElementById("a").innerHTML = time + "s"
}

HTML is very simple for this. It just displays as 0s and increases.

The problem I am having is that I can't seem to get it to display in a format like this 00:00:00.

Any help is much appreciated!

This looks fine for incrementing the time. The trouble is in the code you're using to display the time in the HTML element. Could you share that code? — RobertAKARobin, Jan 02 '16 at 22:19
Have you looked at this? http://stackoverflow.com/a/1322798/2053389 — RobertAKARobin, Jan 02 '16 at 22:26

score 2 · Accepted Answer · edited May 23 '17 at 11:51

2

Give this a shot, using JS's built-in Date class, taken from here:

function timer() {
  var date = new Date(null);
  date.setSeconds(time++);
  document.getElementById("a").innerHTML = date.toISOString().substr(11, 8);
}

edited May 23 '17 at 11:51

Community

1
1

answered Jan 02 '16 at 22:45

RobertAKARobin

3,933
3
24
46

1

Dude you are a genious thanks so much. Worked perfect! Thanks for all the help! – Geroy290 Jan 02 '16 at 22:49

score 0 · Answer 2 · answered Jan 02 '16 at 22:54

Create timer element

<div id="timer">
    <span class="hours"></span>
    <span class="minutes"></span>
    <span class="seconds"></span>
</div>

Style

#timer > .hours:after,  #timer > .minutes:after{
    content: ":";
}

Update timer

var Timer = function(element){
    var secondsElement = element.getElementsByClassName("seconds")[0],
        minutesElement = element.getElementsByClassName("minutes")[0],
        hoursElement   = element.getElementsByClassName("hours")[0],
        show = function(num){
            return ("0" + num).slice(-2);
        };

    return {
        update: function(){
            var now = new Date();
            secondsElement.innerHTML = show(now.getSeconds());
            minutesElement.innerHTML = show(now.getMinutes());
            hoursElement.innerHTML   = show(now.getHours());
        }
    };
};

var timer = new Timer(document.getElementById("timer"));

setInterval(function(){
    timer.update();
}, 500);

How to format the elapsed time of setInterval method JavaScript

2 Answers2