JavaScript Clock

The clock above is driven by JavaScript functions which load images of the digits 0 through 9 based on the local time. The images are pre-loaded into cache using the Image function assigning each image file name to an array. The image file names end with a digit equal to the digit to be displayed. This makes keeping track of the file names simpler.

There are three functions which return the hours, minutes, and seconds given a time value. Another function extracts individual digits for a given value of hours, minutes, or seconds. These digits correspond to the image file name array indexes.

The IMG tags for the clock digits are named so that they can be referred to symbolically. Every 0.2 seconds (using the setTimeout function) each of the digits required to display the time is checked to see if the digit has changed. If it has, the new image is loaded.

The image style selection is a FORM with INPUT RADIO buttons all named the same so that only one can be selected. The Submit button calls a JavaScript subroutine which determines the index of the button selected. This is the same as the index of the image name array. When this index is used for the image name array, the new images are loaded.

The code for the page is extensively annotated. Please help yourself, but if you use it, we would like you to give WebSorcerer credit somehow and let us know where your site is so that we can appreciate your work.