JavaScript Bitmapped Clock


Features
Real time update
Resizable, customizable bitmaps
It's a free script
You can view the source

This script works best with browsers that support 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 a 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.  Alternatively, you can create or use other images, just make sure the filenames are the same.  Also make the height of all the images the same.
0.gif .. 9.gif                   (ten gif files, one for each digit)
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
	}
}

loadImages();

//end of script -->
</SCRIPT>
<!-- END OF HEADER SCRIPT -->

Put the following code inside the <BODY tag> (see example).

onLoad="tickClock();"

For example:

<BODY BGCOLOR="#000000" TEXT="#FFFFFF" onLoad="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=JAVASCRIPT>
<!-- 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 so that browsers that do not support JavaScript1.1 (such as Internet Explorer 3.0 or older) will not bomb out. In such browsers, the clock will appear as text inside a text-field instead of as bitmaps.

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.  Internet Explorer 4 does supports image object, so you should also see a bitmapped clock if you're using it.


Digit Sets

Click the name to see a preview.

Set Name Sample
Emboss
Formal
Glowing

For more digit bitmaps sets, try Digit Mania at http://www.digitmania.holowww.com/digital.html


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 Advanced Use script which display a simple text clock if it detects that the browser does not support image object.  Internet Explorer 4 or later supports image object, so the script should work.

Please let me know if you find this script useful.
permadi@permadi.com
Script written by & (C) 1997, 1998 F. Permadi

The material and any documentation contained here is provided "as is" and without warranty of any kind. 

<< INDEX >>