时钟在Javascript中

时间:2012-02-12 10:09:26

标签: javascript timer clock

我在javascript中制作了一个时钟,但它是一个静态时钟。我需要在以下代码中进行哪些更改,以便每秒更新一次。

<html>
<head>
    <title>Javascript Clock</title>
    <script type="text/javascript">
        function clk() {
            var a=new Date();   
            document.getElementById("disp").innerHTML=a.getHours() + ":" + a.getMinutes() + ":" + a.getSeconds() ;

        }
    </script>
</head>

<body>
    <input type="button" onclick="clk()" value="Display Clock" />
    <p id="disp">Clock Space</p>
</body>

</html>

5 个答案:

答案 0 :(得分:6)

您可以使用setInterval每秒运行clk()函数:

setInterval(clk, 1000); // run clk every 1000ms

MDN on setInterval

正如nnnnnn指出的那样,定时器间隔可能不会与实际的实时秒的同步,因此使用100ms这样的间隔可能不是一个坏主意。

答案 1 :(得分:0)

setTimeout正如一些答案中所建议的那样,并不是正确的答案。 setTimeoutsetInterval可能看起来相似,但setTimeout适用于单个事件,而setInterval适用于重复事件,如时钟。

所以,setInterval是正确的答案,但 Twisol 的帖子只提供了一半的解决方案。 setInterval函数在页面加载时启动计时器,但您还必须在加载另一页时停止计时器。如果不这样做,那么每次再次加载时钟页面时,将启动一个新的计时器,而旧的计时器仍由浏览器保存。

<body onLoad="startTimer();" onUnload="stopTimer();">    

启动计时器时,setTimeout函数返回计时器的ID,您将其作为clearTimeout函数的参数传递:

var intervalID;
function startTimer() {
  intervalID = window.setInterval(updateDateAndTime, 200);
}

function stopTimer() {
  window.clearInterval(intervalID);
}



nnnnnn 有关于更新频率的观点。但请记住,并非完整更新功能可能需要每秒执行10次。我的时钟功能例如用时钟的设置读取cookie。您不希望每秒读取cookie 10次。更重要的情况是XMLHttpRequest的召唤。服务器可能会或可能不会在100毫秒内回复 对于这些情况,我通常创建一个滴答计数器,每次调用函数updateDateAndTime时递增,并在达到例如100时复位。这意味着滴答计数器每10秒重置一次。这是读取cookie或发送XMLHttpRequest的好频率。只需将每秒不需要运行10次的函数分组,并在每次滴答计数器重置时执行它们。

答案 2 :(得分:0)

系统时间的JavaScript数字时钟也可以手动设置。 :-)

 function timer(h,m,s){

 var sec; 
 var min; 
 var hrs; 
 var day;

 if(((s<=59) && (s>=0)) && ((m<=59) && (m>=0)) && ((h<=23) && (h>=0))){

 sec=s; 
 min=m; 
 hrs=h;

 //set parent element id 'lga' to your id 

 var parent = document.getElementById('lga'); 
 parent.innerHTML = '';
 var child = document.createElement('div'); 
 child.id = "thanesh";
 child.style = 'font-size:20px'; 
 parent.appendChild(child);

 setInterval(function(){ 

 sec++;

 if(sec==60){sec=0;min++;}
if(min==60){min=0;hrs++;}
if(hrs==24){hrs = 0; min = 0; sec = 0;}

if(hrs<=12){
day = 'AM';
}else{
day = 'PM';
}

document.getElementById('thanesh').innerHTML = '<table style="background-color:#f5f5f5;"><tr><td><div id="hh">0</div><td>'
                       +hrs+' : <td><div id="mm">0</div><td>'
                       +min+' : <td><div id="ss">0</div><td>'
                       +sec+' <td>'

                       +day+'</td></td></td></td></td></td></td></tr></table>';
if(sec>9){
document.getElementById('ss').style.display = "none";
}else if(sec==0){
document.getElementById('ss').style.display = "block";
}

if(min>9){
document.getElementById('mm').style.display = "none";
}else if(min==0){
document.getElementById('mm').style.display = "block";
}

if(hrs>9){
document.getElementById('hh').style.display = "none";
}else if(hrs==0){
document.getElementById('hh').style.display = "block";
}

},
1000);

}else{
alert("Check time inputs...!");
}
}

//Set Hour, Minutes, Seconds by JS / manually

var date = new Date();

var hst = date.getHours();
var mst = date.getMinutes();
var sst = date.getSeconds();

timer(hst,mst,sst);

答案 3 :(得分:0)

由于您对真实时钟的“每秒更新”与其他计算机任务竞争,下一个真实时钟之前的延迟tic经常小于 1000 毫秒.因此,最好使用 setTimeout 而不是 setInterval。事实上,我们只需要稍微扭曲一下被拒绝的 姚先进's solution here arround 的结尾,导致:

function clk() {
        var a=new Date();   
        document.getElementById("disp").innerHTML=a.getHours() + ":" + a.getMinutes() + ":" + a.getSeconds() ;
        setTimeout(clk, 1000 - a % 1000);
    }

这是我自 2007 年以来的时钟解决方案。

答案 4 :(得分:-1)

您可以将setTimeout(clk,1000);添加到您的函数中,如下所示:

function clk() {
        var a=new Date();   
        document.getElementById("disp").innerHTML=a.getHours() + ":" + a.getMinutes() + ":" + a.getSeconds() ;
        setTimeout(clk,1000);
    }