|
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.
| 
Free Downloads
RSS Feed