Script Tip 84

by Joe Burns, Ph.D.



     This is a great little script. If you've read the JavaScript Goodies book, then you probably know how to put a clock together. If not, you've probably at least seen a Javascript clock. Each of them is done with straight text usually showing up in a text box or in the status bar.

     Script Tip 25 shows a nice running clock.

     This script is a great example of how to put together a running JavaScript clock, but it goes one further. The display is graphic. It looks like a digital clock.

     Take a look:

Here's the Code

     Right up front, you're going to need some images. These images:

- dgt0.gif      - dgt1.gif
- dgt2.gif      - dgt3.gif
- dgt4.gif      - dgt5.gif
- dgt6.gif      - dgt7.gif
- dgt8.gif      - dgt9.gif

- dgta.gif      - dgtp.gif

- dgtbl.gif      - dgtcol.gif

     The names of the numbers speak for themselves. The A and the P are for AM and PM, the dgtcol image is the colon column and the dgtbl is the blank image that shows up when nothing is called for. It's also the default image. It shows up even if the script doesn't run. You'll see that in the image code.

     And speaking of that code:

<img src="dgtbl.gif" name="tensHour">
<img src="dgtbl.gif" name="Hour">

<img src="dgtcol.gif">

<img src="dgtbl.gif" name="tensMin">
<img src="dgtbl.gif" name="Min">

<img src="dgtcol.gif">

<img src="dgtbl.gif" name="tensSec">
<img src="dgtbl.gif" name="Sec">

<img src="dgtbl.gif">

<img src="dgtbl.gif" name="amPM">

     Now, you may have noticed that I have them listed vertically, but in the code they're all in one big long line. When you put this on your page, go with the big long line. The reason is that browsers will often mistake that carriage return as a space. If that happens, there will be a space between each number and the effect will die.

     You'll notice I've broken out the dgtcol images. They never change, so at this point, we need not worry about them.

     The two hour numbers are broken down into "tensHour" and "Hour". The minutes are done the same way, "tensMin" and "Min". Seconds follow along, "tensSec" and "Sec".

     The final digit is the "amPM" image.

     Now that we have the image code down, let's load those pups.

Load All of the Images

     One of the main concerns about running a digital clock like this one is getting all of those images into the browser's memory cache. If you have to wait for a download every time a new number is needed, the effect will die. You want all of those images loaded when they're called for, so you want to preload them. Here's the code that does it:

var d=new Array();
for(i=0;i<10;i++) {
d[i]=new Image();

     This is a very clever piece of script. There are ten images that must load, the numbers zero through 9. There are other images, yes, but it's the numbers we're concerned with right now.

     We begin by setting up an array, but the array doesn't exist yet. We'll build it in a moment. The array will be named "d".

     This code forms a loop. Remember that from the last script? In this case it's a for loop with three conditions, and "i" equals zero. As long as "i" is less than 10, it will loop through. If "i" isn't yet 10, add one to it (++). Sooner or later "i" will equal ten and the loop will stop.

     Whatever is in between the curly brackets following the loop is done every time the loop flows through.

Want more information about Javascript clocks?
Search the Web.

     Notice the [square brackets]. That's JavaScript for a number replacement. The variable [i] is sitting in there. Each time the script loops through, "i" will be replaced with the number it represents set by the loop up above.

     So the first time the loop rolls, this is created:

d0=new Image();

     The next time, you get this:

d1=new Image();

     Following the process through, the script runs ten times. Recognize the format? The codes it's creating are preloads. By looping through, the digit images are preloaded.

     But what about the other images? Here you go:

var pm=new Image;
var am=new Image;
var dates,min,sec,hour;
var amPM="am";

     The author did those by hand.

     OK, they're in the cache. Let's post them, correctly, to the page.

Next Week: Post the Images

     Do YOU have a Script Tip you'd like to share? How about suggesting a Script Tip to write about? I'd love to hear it. Write me at: [email protected].

Learn to write your own JavaScripts with the HTML Goodies 30-Step Primer Series