JavaScript
Bitmapped Clock
Features
Real time update
Resizable,
customizable bitmaps
It's a free script
You can view the
source
This script works with browsers that supports JavaScript1.1 or
higher.
That means Netscape 3.0 or later, and Internet Explorer 4.0 or
later.
Feel free to use the script and the bitmaps for your page.
QuickUse (for casual
user)
Download this zip
file and unzip it.
Open the simpleClock.html file and use it as template.
You can copy and
paste the script code from the simpleClock.html, or use a
visual HTML editor to copy and paste the clock around.
Please note that this
version will not work with browsers that does not support
JavaScript1.1 (such as Internet Explorer 3.0 or older.
Advanced Use (for
people who are familiar with JavaScript)
You need to have 14
images for the clock. Here's a default set that you can use.
Just right click on the image and do SaveImageAs.
0.gif .. 9.gif
colon.gif
am.gif
pm.gif
blank.gif
Put the following code between the <HEAD> </HEAD> tag
of your HTML page.
<!-- START OF HEADER SCRIPT --> <!-- PUT THESE INSIDE THE HEAD SECTION OF YOUR HTML PAGE --> <SCRIPT LANGUAGE="JAVASCRIPT1.1"> <!-- hide from silly browsers or browsers // that does not recognize JavaScript
// global variables var digitImages=new Array
if (document.images) { var amImage=new Image var pmImage=new Image } // load the images used by the clock // (the images are are digits from 0 to // 9 with the same dimension for each image) // if you have a different path(s) or filename(s), // substitute the filenames/path with the correct ones // put quotes with nothing between for current directory var imgPath="" function loadImages() { // make sure browsers is capable to run this // script by checking that "document.images" object exists if (document.images) { digitImages=new Array for (i=0; i<10; i++) { digitImages[i]=new Image(); digitImages[i].src=""+imgPath+i+".gif"; } // image of the am, pm sign amImage.src=imgPath+"am.gif" pmImage.src=imgPath+"pm.gif" } }
function tickClock() { // this tells the browser to call the // "tickClock()" function every 1 second setTimeout("tickClock()", 1000); // make sure all the digit images are loaded if (document.images) { for (i=0; i<10; i++) { if (!digitImages[i].complete) return; } }
thisTime = new Date() hours = thisTime.getHours() minutes = thisTime.getMinutes() seconds = thisTime.getSeconds()
if (hours>=12) { hours-=12 if (document.images) document.ampmImage.src=pmImage.src } else { if (document.images) document.ampmImage.src=amImage.src }
// convert the digit to string // make sure there're at least 2 digits hourString="0"+hours+"" minuteString="0"+minutes+"" secondString="0"+seconds+""
// format the hour hour1=parseInt(hourString.charAt(hourString.length-1)) hour2=parseInt(hourString.charAt(hourString.length-2)) // format the minute minute1=parseInt(minuteString.charAt(minuteString.length-1)) minute2=parseInt(minuteString.charAt(minuteString.length-2)) // format the seconds second1=parseInt(secondString.charAt(secondString.length-1)) second2=parseInt(secondString.charAt(secondString.length-2))
// for browsers that support image object, update the clock by replacing // the images if (document.images) { // update the images document.hour1Image.src=digitImages[hour2].src document.hour2Image.src=digitImages[hour1].src document.minute1Image.src=digitImages[minute2].src document.minute2Image.src=digitImages[minute1].src document.second1Image.src=digitImages[second2].src document.second2Image.src=digitImages[second1].src } // for browsers that do not support image object, put the time on the text-field else { document.clockForm.clock.value=""+hour2+hour1+":"+minute2+minute1+":"+second2+second1 } } //end of script --> </SCRIPT> <!-- END OF HEADER SCRIPT -->
Put the following code inside the <BODY tag> (see example).
onLoad="loadImages(); tickClock();"
For example:
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" onLoad="loadImages(); tickClock();">
Put the following code where you want the clock to show up.
<!-- THE FOLLOWING IS THE CODE THAT DISPLAYS THE CLOCK. --> <!-- YOU CAN PUT THE CLOCK ANYWHERE ON THE PAGE --> <!-- IT COULD BY INSIDE A TABLE, OR AT ANY PLACE ON YOUR PAGE --> <!-- IF YOU HAVE A DIFFERENT IMAGES, --> <!-- SUBSTITUTE THE img src WITH THE CORRECT FILENAME --> <SCRIPT LANGUAGE=JAVASCRIPT1.1> <!-- hide code for browsers that don't understand JavaScript // put the IMG tags on a single line to avoid spaces between the images if (document.images) document.write("<TABLE BORDER=4><TR><TD><img src=\""+imgPath+"blank.gif\" name=\"hour1Image\"><img src=\""+imgPath+"blank.gif\" name=\"hour2Image\"><img src=\""+imgPath+"colon.gif\"><img src=\""+imgPath+"blank.gif\" name=\"minute1Image\"><img src=\""+imgPath+"blank.gif\" name=\"minute2Image\"><img src=\""+imgPath+"colon.gif\"><img src=\""+imgPath+"blank.gif\" name=\"second1Image\"><img src=\""+imgPath+"blank.gif\" name=\"second2Image\"><img src=\""+imgPath+"am.gif\" name=\"ampmImage\"></TR></TD></TABLE>") else document.write("<FORM name=\"clockForm\"><INPUT TYPE=TEXT WIDTH=15 NAME=\"clock\"></FORM>") // end of hiding--> </SCRIPT>
Please note that this code has a workaround for browsers that do
not support JavaScript1.1 (such as Internet Explorer 3.0 or
older). In such browsers, the clock will appear inside a
text-field instead of as a bitmapped clock.
Here is an example page. If you try to load that page in
Internet Explorer 3, you will get the clock inside a text-field,
if you load it on Netscape 3 or later, you should see a bitmapped
clock.
Digit Sets
Set | Sample | Credit |
Emboss | ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
F. Permadi permadi@psych.ucla.edu |
Formal | ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
F. Permadi permadi@psych.ucla.edu |
Glowing | ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
F. Permadi permadi@psych.ucla.edu |
Gold Odometer | ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
Created by MEPS meps@cs.msu.su Also available at: http://www.digitmania.holowww.com/odometer.html |
Modern Button Counter | ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
Created
by Björn Gorke Bjoern@mindless.com http://www.grafixs.com This digit set is also available at http://www.digitmania.holowww.com/digital.html |
For more digit bitmaps sets, try http://www.digitmania.holowww.com/digital.html
Frequently Asked
Questions
Why isn't the script working on my Netscape 3?
Make sure JavaScrpt is enabled. Goto the menu Option ->
Network Preferences -> Languages. The EnableJavaScript
checkbox should be checked.
What happen if the user does not have a JavaScript enabled?
The clock will not be visible/the script will not work.
Why isn't the script working on my Internet Explorer 3?
Internet Explorer 3 does not support image object. This can be
compensated with the following script which display a simple text
clock for such browsers. Internet Explorer 4 or later supports
image object, so the script should work.
Script (C) 1997, 1998 F. Permadi