What time is it?

The possibilities to display a dynamic contents in the document are rather limited. Small portions of changing text can be displayed on buttons or in a text field by periodically modifying their value attribute.

Button Text field

The functionality of the clocks is provided by the following JavaScript functions which can be put in the header, as well as in the body, of the document:

function updateClock()
{
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  document.clock.display.value = format(hours) + ":" +
                                 format(minutes) + ":" +
                                 format(seconds);
  document.clock.display2.value = format(hours) + ":" +
                                 format(minutes) + ":" +
                                 format(seconds);
}

function format(n)
{
  if (n < 10)
    return "0" + n;
  else
    return n;
}

The function format(n) takes a number n and returns its two-digit representation. That is, if n<10 then a leading zero is added.

The body part of the clock is accomplished by the following HTML and a call to the updateClock() function:

<form name="clock" action="">
<input name="display" type="button" value="00:00:00">
<p> </p>
<input type="text" size="9" name="display2" value="00:00:00">
</form>

<script type="text/javascript">
setInterval("updateClock()", 1000);
</script>

The setInterval() method calls the updateClock() function every 1000 milliseconds (= 1 second).