How do you show the current time on a web page?

Question

I want to show the current time on a website I am making for class, but I cannot find a way to do so. Is their a way to show real time in code? and if so, how do you do it?

Answer 1

You can accomplish this fairly easily by first creating an element:

<span id="clock"></span>

And then getting a reference to that element:

var clockElement = document.getElementById( "clock" );

Next we'll need a function that will update the contents with the time:

function updateClock ( clock ) {
    clock.innerHTML = new Date().toLocaleTimeString();
}

Lastly, we'll want to make sure we're calling this every second to keep the clock up to date:

setInterval(function () {
    updateClock( clockElement );
}, 1000);

So when we put it all together it looks like this:

(function () {

  var clockElement = document.getElementById( "clock" );

  function updateClock ( clock ) {
    clock.innerHTML = new Date().toLocaleTimeString();
  }

  setInterval(function () {
      updateClock( clockElement );
  }, 1000);

}());