| How
to use this clock
How it is done
This clock is pretty cool, isn't it? Usually
such things are done with Java applets, which are inconvenient for a variety
of reasons... most of all, they require a long time for startup. So I did this
clock with images and a crappy piece of JavaScript code. It's not industry
quality code, it's just a quick hack - made to work.
You can use this clock for your own purposes,
as long as you leave the author's note at the beginning of the code intact.
You can download the whole package from http://www.leomeyer.de/leomeyer/software/HTMLclock/Animated_HTML_Clock.zip.
How you use
this clock in your own HTML pages:
1. Define the image placeholders
<img border="0" src="clockimg/i0_1_0.png" width="9" height="15">
<img border="0" src="clockimg/i0_1_0.png" width="9" height="15">
<img border="0" src="clockimg/colon.png" width="8" height="15">
<img border="0" src="clockimg/i0_1_0.png" width="9" height="15">
<img border="0" src="clockimg/i0_1_0.png" width="9" height="15">
<img border="0" src="clockimg/colon.png" width="8" height="15">
<img border="0" src="clockimg/i0_1_0.png" width="9" height="15">
<img border="0" src="clockimg/i0_1_0.png" width="9" height="15">
Note that you have to adjust the path to the
clock images. The colons should be a bit more narrow than the digit images.
2. Setup the script section
<script language="JavaScript">
var clockimgs = 1;
var imgprefix = "clockimg/";
</script>
<script language="JavaScript" src="clock.js"></script>
The clockimgs variable must contain the image
offset of the first digit, i.e. the absolute number of that image on the web
page, starting from 0. If you don't get that number right, other images will
be affected, giving strange results! The
imgprefix variable must contain the path to the images you are using. Of
course, you'll have to adjust this, as well as the path to the clock.js code
file. How it
is done The clock works by
modifying an array of images after regular intervals. Each digit transition
(e.g. from 0 to 1) is broken up into 5 different images:      ,
which, if switched through every 200 milliseconds, create the illusion of
moving digits. As there are other digit transitions, 5 to 0 (for full hours),
3 to 0 and 2 to 0 (for 23 to 00 hours), we have to provide images for these
transistions as well. The images are created using a small Java program; to
run this program you must have the Java Media API installed. The Java program
is contained in the download package and you can use it to create your own
image files if you want. The JavaScript
code is used to select the appropriate images which should be displayed. This
code has been tested on IE 6.0 and Netscape 6.2, both on Windows 2000. It
should run on other browsers/OSes as well. The clock uses less than 1% average
CPU time per browser window on my machine. Every
few seconds the time must be adjusted because the system clock and this
browser clock tend to get out of sync due to processor load, blocked window
operations or other reasons. In such cases, you may see the wrong time for a
couple of seconds before the clock corrects itself.
|
Back to top