使用javascript制作带有div的现有时间的实时时钟

Question

好吧,我们假设我们有一个需要实时的网站;

例如:

<div id="updatetime">21:12:52</div>

每秒更新小时:m:秒.

我有什么想法使用interval function做长池并添加秒+1如果到60然后添加+ 1到m和相同的小时.但有没有一个功能已经解决了这个问题？

你如何21:12:52使用javascript每秒更新一个移动的真实时钟？

我有搜索谷歌,stackoverflow,其中许多告诉我们如何从JavaScript进行当前的实时日期时间.但是现有的时间都没有.如果有请请插入链接.

Answer 1

它可以像这样简单:

setInterval(function(){
    document.getElementById("updatetime").innerHTML = (new Date()).toLocaleTimeString();
}, 1000);

或使用其他Date方法微调输出.

更新

我现在才意识到OP不是要求用当前时间增加一个元素,而是用预定的时间.

这不是那么简单,但这是一个适合原始问题的解决方案:

function increment_time_element(element, delay) {
    var interval, last,
        time_pattern = /(\d+):(\d+):(\d+)/,
        start = element.innerHTML.match(time_pattern),
        then = new Date;

    then.setHours  (parseInt(start[1], 10) || 0);
    then.setMinutes(parseInt(start[2], 10) || 0);
    then.setSeconds(parseInt(start[3], 10) || 0);

    function now() {
        return Date.now ? Date.now() : (new Date).getTime();
    }

    last = now();

    interval = setInterval(function () {
        var current = now();
        // correct for any interval drift by using actual difference
        then.setTime(then.getTime() + current - last)
        last = current;
        element.innerHTML = then.toString().match(time_pattern)[0];
    }, delay || 1000);

    return {cancel: function() { clearInterval(interval) }};
}

// Usage:
var incrementing_time =
    increment_time_element(document.getElementById("updatetime"));

// Then, if you want to cancel:
incrementing_time.cancel();