如何格式化setInterval方法JavaScript的运行时间

How to format the elapsed time of setInterval method JavaScript

本文关键字：JavaScript 运行时间 方法 setInterval 格式化      更新时间：2023-09-26

我有一个简单的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的格式。

非常感谢您的帮助！

使用JS的内置Date类，从这里开始：

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

创建计时器元素

<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);
相关文章：