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

Formal


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