Barrel timer
Version 1.0 - 1st November 2004
This script emulates an old-style rotary barrel clock with six digits. It should work in all modern graphical browsers (with javascript enabled), although there do seem to be some rendering problems in Opera 7, which I haven't yet isolated.
The demo below uses javascript: links to illustrate the functionality
of the script, but in practise you would address it from another script:
It works by animating the top position of six images - each image is a column of numbers and the whole thing is inside a clipping region; the curved effect is created by a PNG (Portable Network Graphics) image with a gradient from black to transparency.
The main point of this is a stopwatch - you can set the timer to any value and snap or animate the dials to position; you can then count up or down and optionally stop at zero. You can also animate the digits directly - each automatically increments it's neighbour if it gets above its numerical base, or decrements if it gets below 0, so the stopwatch is simply a one-second loop that adds one to the final digit.
You could also use the script as a generic number readout -
for example, another script could convert the local time into
six discrete digits and then
set the clock to that position onload.
Or you could incorporate it into a game or other stylised
application - wherever this kind of readout is required.
If scripting (or this script) is not supported, the clock will appear as static HTML - showing all zeros. For this reason, I recommend that you only use it within a private application, where noscript concerns are not an issue; or generate the clock HTML itself in javascript.
Get the script
Download the zipfile [10K], unpack it into your site directory
and include the script
and stylesheet on your page - they should both go in the
<head> section:
<!-- Barrel timer by brothercake - http://www.brothercake.com/ -->
<link rel="stylesheet" type="text/css" href="barreltimer.css"/>
<script type="text/javascript" src="barreltimer.js"></script>
Then add the necessary HTML:
<div id="clockContainer">
<div id="clock">
<img id="digit0" src="base10.gif" width="0" height="0" alt="0" title="" />
<img id="digit1" src="base10.gif" width="0" height="0" alt="0" title="" />
<img id="colon0" src="colon.gif" width="0" height="0" alt=":" title="" />
<img id="digit2" src="base6.gif" width="0" height="0" alt="0" title="" />
<img id="digit3" src="base10.gif" width="0" height="0" alt="0" title="" />
<img id="colon1" src="colon.gif" width="0" height="0" alt=":" title="" />
<img id="digit4" src="base6.gif" width="0" height="0" alt="0" title="" />
<img id="digit5" src="base10.gif" width="0" height="0" alt="0" title="" />
<span id="coverTop"></span>
<span id="coverBottom"></span>
</div>
</div>
The images all have "0" for their width and height,
so that they don't show up in non-CSS
browsers.
There are further code examples in the zipfile, that show you how to animate the dials.
Browser notes
Internet Explorer 5 (for Mac and Windows) don't support PNG alpha-channel transparency; they'll see a completely black strip above and below the main row of digits, rather than a gradient.
![[php]](/images/php.gif "Uses PHP")