如何格式化setInterval方法JavaScript的運行時間

Question

我有一個簡單的setInterval設置，如下所示：

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

執行此功能：

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

HTML非常簡單。 它只顯示為0s並增加。

我遇到的問題是我似乎無法以00:00:00這樣的格式顯示它。

任何幫助深表感謝！

Answer 1

使用JS的內置Date類，從這里取一個鏡頭：

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

Answer 2

創建計時器元素

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

樣式

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

更新計時器

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);