Analog Clock

4. Configuration

There are quite a number of different ways that you can configure this analog clock script. Let's take a look at a few of them here.

The first option is to change the size of the clock. To do this you just need to change the clocksize parameter to the size that you want for your clock. You could make the clock slightly smaller by reducing the size from 150 down to 120 (smaller than that becomes difficult to read). You could also make the clock as much larger as you need. For example clocksize = 400. The size of the text within the clock adjusts automatically as you change the clock size.

The next few parameters define the colours used to display the clock.

The first of these defines the colour for the text on the clockface while the following three define the colours to use for the second, minute, and hour hand respectively. For example if you want red lettering, pink hour and minute hands, and a black second hand you can use:

Your clock will then look like this.

The next option that we have in configuring our clock is to change the way that the numbers are displayed. This is done by updating the numstyle parameter. The zero value displays the clock with conventional numbers 1 through 12. There are also two alternative styles: numstyle = 1 and numstyle = 2. You can also change the fonts used to display the text by updating the font_family parameter to include a different list of fonts.

The next set of options determine whether the clock displays your visitor's time or the time in a selected timezone.

With localZone = 1 your visitor's time is displayed. If you set that to 0 you can get the clock to display a specified timezone. The timezone itself is specified in hours in the mytimezone field (for example -5 for New York USA, 9.5 for Adelaide Australia). The dst field needs to be set to 1 when you want the closk set forward for daylight savings time if it occurs in your area. You can add your own code to determine from the data whether or not DST currently applies and update the value automatically if you wish. The city and country fields display in the lower half of the clock so that people seeing the clock will know what location the time displayed applies to. For example to display the time at my location on the clock I set the parameters as follows:

To get the clock adjusting for daylight savings time between the first Sunday in October and the first Sunday in April (which is when it applies here) I added:

If you don't want to write your own code to automatically apply daylight savings time then you can always manually edit the file to change between dst = 0 and dst = 1 as required.

The final few parameters allow you to detach the clock from the web page. To be able to set the position of the clock on the screen independently of the page simply set fix = 0. You can then set the absolute position of the clock using the xpos and ypos variables. By adding a script to manipulate these values you can get the clock to stay in a fixed position with the page scrolling behind it, you could have the clock follow the mouse pointer, or any other animation that you wish to apply to the clock.

Of course you can also apply any or all of these customizations in combination with one another giving you a wide range of possibilities on what you can do with this clock script.