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.
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.