Clock In Javascript

Question

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.

Solution 1:

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.

Solution 2:

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

Solution 3:

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.

Solution 4:

Since your "update every second" of the real clock competes with other computer tasks, the delay before the next real clock tic will be less than 1000 ms very often. So, better use setTimeout instead of setInterval. In fact, we just need to twist a little bit the end of the denied 姚先进's solution here arround, resulting in:

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

This is my clock solution since 2007.

Solution 5:

here we go

<html>

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

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

</html>

JavaScript Programmer Calgary