如何讓我的Javascript時鐘'實時'？

我希望能夠幫助我使用Javascript/HTML更新實時創建的這個時鐘。如何讓我的Javascript時鐘'實時'？

<!DOCTYPE html> 
<html> 

<head> 
    <link rel="stylesheet" href="style.css"> 
    <script> 
    function timer() { 
     var today = new Date(); 
     var hrs = today.getHours(); 
     var mins = today.getMinutes(); 
     var secs = today.getSeconds(); 
     var mili = today.getMilliseconds(); 

     document.getElementById('txt').innerHTML = "Since midnight, " + hrs + " hours, " + mins + " minutes, " + secs + " seconds, and " + mili + " milliseconds have passed."; 
    } 
    </script> 
</head> 

<body onload="timer()"> 

    <div id="txt"></div> 

    <body> 
    <h1>Clock</h1> 
    </body> 

</html>

任何幫助，將不勝感激。

來源

2016-09-21 D. Lin

使用setInterval函數調用定時器功能每秒 –

您應該創建一個間隔計時器，並且每X毫秒調用一次計時器函數，因爲您顯示的毫秒精度可能要保持爲100ms這樣的低。我建議爲此使用setInterval。只要把這個在你的腳本塊：

setInterval(timer, 100);

這是一個完整的例子：

function timer() { 
 
    var today = new Date(); 
 
    var hrs = today.getHours(); 
 
    var mins = today.getMinutes(); 
 
    var secs = today.getSeconds(); 
 
    var mili = today.getMilliseconds(); 
 

 
    document.getElementById('txt').innerHTML = "Since midnight, " + hrs + " hours, " + mins + " minutes, " + secs + " seconds, and " + mili + " milliseconds have passed."; 
 
} 
 

 
setInterval(timer, 100);

<div id="txt"></div>

來源

2016-09-21 09:23:22 musefan

使用setTimeout函數（參見window.setTimeout）

在您的情況：致電t他定時器功能和添加

window.setTimeout(timer, 50);

在函數的最後。

例子：

function timer() { 
 
    var today = new Date(); 
 
    var hrs = today.getHours(); 
 
    var mins = today.getMinutes(); 
 
    var secs = today.getSeconds(); 
 
    var mili = today.getMilliseconds(); 
 

 
    document.getElementById('txt').innerHTML = "Since midnight, " + hrs + " hours, " + mins + " minutes, " + secs + " seconds, and " + mili + " milliseconds have passed."; 
 
    
 
    window.setTimeout(timer, 50); 
 
} 
 

 
timer();

<div id="txt"></div>

來源

2016-09-21 09:23:47 oberbics

'setTimeout'纔會觸發一次，這樣你就不會得到「活」的效果，除非你把它在'timer'功能裏面。雖然我不喜歡那個 – musefan

@musefan的想法：那是正確的。但如果它設置在定時器功能中，它應該工作。將它添加到答案 – oberbics

是的，你的方法在技術上沒有什麼問題，只是我個人的偏好。這不是我的方式downvote ... – musefan

如何讓我的Javascript時鐘'實時'？

回答

相關問題