Using the Date() Object to Create a Clock

In this section, the article shall outline how to display the time on a web page while the next section shows some formats that can be achieved.

Today some formatting principles are needed. Where clocks are concerned, the recognized format is hours, minutes, seconds, like so: 21:38:45. So here is the code:

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
function liveclock(){
  var datetoday = new Date();
  var thehour = datetoday.getHours();
  var themin = datetoday.getMinutes();
  var thesec = datetoday.getSeconds();
  var livetime = thehour + ":" + themin + ":" + thesec;
  document.clock.showtime.value = livetime;
}
//-->
</SCRIPT>

We will get to the form part in a second. This will now give the time a recognizable format for any viewer of the web page. A clock and a date are nice real time additions to any web page. The format will show as:

09:10:35

Of course, we realize quite quickly that there is a static clock on the screen. That's not really an effective "live" clock as described! Not to worry, as there is a method called setInterval() which will solve this problem. The solution is not as complex as it may seem. Most coders are familiar with loops in code. Well, in a similar fashion, the code here needs to call the function liveclock() every second so that it continuously updates by the second like a live clock. Since there are 1000 milliseconds in a second, setInterval() is set to that value.

Now, a line of code has already dealt with placing the time on the form text box. There is the name clock which is the name of the form, and showtime which is the name of the text box.

document.clock.showtime.value = livetime;

Using basic form hierarchy, the value in livetime is placed inside the text box.

In the HTML code of the page, decide where the clock is to be placed and insert:

<FORM NAME="clock">
  <INPUT TYPE="TEXT" SIZE="11" MAXLENGTH="12"VALUE="" NAME="showtime">
</FORM>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
  setInterval("liveclock()", 1000);
//-->
</SCRIPT>

Now we will look at that more closely and break down the logic applied here.

1. An instance of the Date() object called datetoday is created and assigned that value to the variables thehour, themin, thesec and livetime. Feel free to change the variable names for the instances as you please. This is just an example.
2. Next, using basic form hierarchy, the time was displayed in a standard text box by placing the livetime digits into the text box value.
3. Then, the interval was required to run a loop that would refresh the clock time every 1000 milliseconds or second.

Where milliseconds are concerned a date object can be written as:

Today = new Date (.....) - as in new Date(milliseconds);

Using Date.parse(), it is possible to display the number of milliseconds of a Date string. Here is a format example with the returned value calculated and placed in Today.

Today = new Date("month date, year");