Analog Clocks

This latest version of my analog clock script not only handles displaying multiple analog clocks on the same page, it is also just about as unobtrusive as possible with only the defClocks() function and the id attributes for each of the clocks being in the global namespace. The rest of the analog clock script is wrapped inside an anonymous function so as to avoid having it interfere with anything else in the web page.

This script as with all modern unobtrusive scripts attaches to the bottom of the web page just before the </body> tag. In order to use the script you need to define where each of the clocks is to appear by specifying ids on HTML tags where each tag is to appear. These ids must all start with "clock_" followed by a suffix of your choice to identify the specific clock. You then need to define your clocks within the defClocks() function which will then automatically be run at in order to initialise each of your clocks.

To initialise each individual clock you need to create a new clock object inside the defclocks function (the clock object defined in the script is passed to the defclocks function when it is run to allow you to do this. This object expects you to supply a number of parameters that define how each specific clock is to appear. The first parameter is the suffix for the id that identifies which clock in the HTML you are defining and the subsequent parameters define its appearance.

Let's begin by copying the main script and save it to a separate file called clocks.js.


Attach the clocks.js to the bottom of your page immediately before the </body> tag.

The next step is to attach one or more clock_something into your page where you want the clocks to appear.

Now all we need to do is to add a second JavaScript into the page immediately before the one we just added that defines the defClock() function to define the clock(s) we want to display on this specific page. Copy the following to use as your starting point and we'll then look at how you would update the various options to change the appearance and time displayed on specific clocks.


The defClock function is called from within the analog clock script so you need to include the function wrapper exactly as shown. Each clock is then defined using a new clock() call specifying the suffix from the id as the first parameter. The rest of the parameters can also be specified directly when creating the clock object but the code here defines variables to hold each value so as to make it easier to remember which parameter is which.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow