LanguagesJavaScriptPut together a digital clock

Put together a digital clock content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.


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.

A previous Script Tip, ”
Running Digital Clock
” 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 at the code:


Here’s the code

Right up front, you’re going to need some images.

Click here to get the images


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.

Next Week: Post the Images

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories