
Live Graphic Clock And Date
   

Here is a date and time script that uses graphics and updates itself. To use this script, first copy the following line into your <head></head> tag. Also download the images...digits1.zip 

<script language="JavaScript">
<!-- Hide from old browsers
// Copyright  1999 Doug Popeney
// Created by Doug Popeney (easyjava@easyjavascipt.com)
// JavaScript Made Easy!! - http://www.easyjavascript.com

var timerID = null
var timerRunning = false

function stopclock (){
	if(timerRunning){
		clearTimeout(timerID);
		timerRunning = false
	}
}

function showtime () {
	var now = new Date();
	year = new String(now.getYear());
	month = new String(now.getMonth() + 1);
	date = new String(now.getDate());
	hours = new String(now.getHours());
	minutes = new String(now.getMinutes());
	seconds = new String(now.getSeconds());
	
	document.ampm.src = (hours < 12) ? "dgam.gif" : "dgpm.gif";
	hours = (hours > 12) ? (hours - 12) + "" : hours + ""
	hours = (hours == "0") ? "12" : hours
	document.day1.src = (date < 10) ? "dg0.gif" : "dg" + date.charAt(0) + ".gif";
	document.day2.src = (date < 10) ? "dg" + date + ".gif" : "dg" + date.charAt(1) + ".gif";
	document.month1.src = (month < 10) ? "space.gif" : "dg" + month.charAt(0) + ".gif";
	document.month2.src = (month < 10) ? "dg" + month + ".gif" : "dg" + month.charAt(1) + ".gif";
	document.year1.src = (year < 10) ? "dg0.gif" : "dg" + year.charAt(0) + ".gif";
	document.year2.src = (year < 10) ? "dg" + year + ".gif" : "dg" + year.charAt(1) + ".gif";
	document.hour1.src = (hours < 10) ? "space.gif" : "dg" + hours.charAt(0) + ".gif";
	document.hour2.src = (hours < 10) ? "dg" + hours + ".gif" : "dg" + hours.charAt(1) + ".gif";
	document.colon.src = (seconds % 2) ? "dgon.gif" : "dgoff.gif";
	document.minute1.src = (minutes < 10) ? "dg0.gif" : "dg" + minutes.charAt(0) + ".gif";
	document.minute2.src = (minutes < 10) ? "dg" + minutes + ".gif" : "dg" + minutes.charAt(1) + ".gif";

	timerID = setTimeout("showtime()",1000);
	timerRunning = true
}

function startclock () {
	stopclock();
	showtime()
}
// -->
</SCRIPT>


Now put this inside your body code. 

<body onLoad="startclock();">

An example is:
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#000080" ALINK="#000080" onLoad="startclock();">
or 
<body onLoad="startclock();"> 

Now put this where ever you want in your HTML document 

<img src="space.gif" height=21 width=16 name="month1"><img src="space.gif" height=21 width=16 name="month2"><img src="dg-.gif" height=21 width=16><img src="space.gif" height=21 width=16 name="day1"><img src="space.gif" height=21 width=16 name="day2"><img src="dg-.gif" height=21 width=16><img src="space.gif" height=21 width=16 name="year1"><img src="space.gif" height=21 width=16 name="year2">
<img src="space.gif" height=21 width=16>
<img src="space.gif" height=21 width=16 name="hour1"><img src="space.gif" height=21 width=16 name="hour2"><img src="dgc.gif" height=21 width=10 name="colon"><img src="space.gif" height=21 width=16 name="minute1"><img src="space.gif" height=21 width=16 name="minute2"><img src="space.gif" height=21 width=16 name="ampm">
