Barrel timer

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:

0 0 : 0 0 : 0 0

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



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.

Get the script

BSD License → Terms of use


Website gadgets

Bits of site functionality:

Usability widgets

Local network apps

Web-applications for your home or office network:

Game and novelties

More amusing than useful:

Our internal search engine is currently offline, undergoing some configuration changes in preparation for a major site overhaul. In the meantime, you can still search this site using Google Custom Search.

In this area

Main areas

[brothercake] a round peg in a square hole, that still fits