我在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>
答案 0 :(得分:6)
您可以使用setInterval
每秒运行clk()函数:
setInterval(clk, 1000); // run clk every 1000ms
正如nnnnnn指出的那样,定时器间隔可能不会与实际的实时秒的同步,因此使用100ms这样的间隔可能不是一个坏主意。
答案 1 :(得分:0)
setTimeout
正如一些答案中所建议的那样,并不是正确的答案。 setTimeout
和setInterval
可能看起来相似,但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);
}