Clock in Javascript

I have made a clock in javascript but its a static clock. What changes I need to do in the following code so that it updates with every second.

<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>

标签： javascript timer clock

4条回答

smile是对你的礼貌

2楼-- · 2019-07-31 16:05

setTimeout as suggested in a couple of answers is not the correct answer. setTimeout and setInterval may look similar, but setTimeout is meant for single events, while setInterval is for repeating events, like a clock.

So, setInterval is the right answer, but Twisol's post only offers half of the solution. The setInterval function starts a timer when the page loads, but you also have to stop the timer when you load another page. If you don't then each time you load your clock page again a new timer will started while the old ones are still kept by your browser.

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

When you start the timer the setTimeout function returns the timer's ID, which you pass as argument for the clearTimeout function:

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

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

nnnnnn has a point regarding the update frequency. Keep in mind however that not the full update function may need to be executed 10 times per second. My clock function for instance reads cookies with the clock's settings. You don't want to read cookies 10 times per second. A more important case would be a call of XMLHttpRequest. A server may or may not always reply within 100 ms.
For these situations I usually create a tick counter which increments each time the function updateDateAndTime is called, and reset when for instance 100 is reached. That means the tick counter resets every 10 seconds. That's a good frequency for reading cookies, or sending an XMLHttpRequest. Just group the functions which don't need to be run 10 times per second, and execute them each time the tick counter resets.

0人赞添加讨论(0) 举报

神经病院院长

3楼-- · 2019-07-31 16:12

A JavaScript digital clock from system time, can also manually set. :-)

 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);

0人赞添加讨论(0) 举报

混吃等死

4楼-- · 2019-07-31 16:13

You can use setInterval to run your clk() function every second:

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

MDN on setInterval

As nnnnnn points out, the timer interval probably won't be synchronized with the passage of an actual, real-time second, so using an interval like 100ms might not be a bad idea.

0人赞添加讨论(0) 举报

萌系小妹纸

5楼-- · 2019-07-31 16:22

You can add setTimeout(clk,1000); to your function,as bellow:

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

0人赞添加讨论(0) 举报

Clock in Javascript

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间