Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Make Your Own Graphical Digital Clock

By Stephen Bucaro

Why would anyone want to make a clock to display the time on their computer when they already have one on their task bar? Because one of the most fun, interesting, and educational things you can do with Java Script is to make your own image-based digital clock.

The fun part is selecting or creating your own images for the digits and other graphical elements of the clock. You can use 3D digits, digits that look like baby blocks, or digits made out of animals. You can make your clock display the time in Bangkok, Rome, or Tokyo. You can design different cases or "skins" for your clock. You can even make your clock into an alarm clock.

In this article you'll learn about the Java Script Date object and how to use its output to select graphical digits to display the time. I'll explain everything in plain simple English and provide you with clear, easy code that you can understand and modify for your own purpose. Click Here to view the example.

Here's our plan of action to design a graphical digital clock:

1. Use Java Script to preload the digital clock's digit images. To "preload" means to cause the browser to load the images and place them in the user's browser cache so that when the webpage displays the clock will appear instantly rather than after having to wait for each digit to load.

- Of course, you'll need to select or create the digits for your clock first. For this example, I'll provide you with some basic 3D digit images.

2. Code an html <span> to contain your digit images, and enter the html code for the digits, colon, and am/pm images within the <span>.

3. Create a Java Script function, named displayTime, to display the proper clock digit images inside the <span>.

4. Set a Java Script interval timer that the displayTime function will use to call itself at regular intervals to update the time displayed by the digital clock.

5. Set the onload event of the body of the webpage to make the initial call to the displayTime function right after the webpage loads.

6. Define some style (CSS) rules to control the appearance of the clock and its digits.

7. Sit back, admire our work, and image all the cool things we can do to create even more interesting graphical digital clocks.