Well it's ugly but I got borred here at work so........
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CIT041J - Program 5 - Timers</title>
<script type="text/javascript">
//<![CDATA[
// set variables
var currentTime = new Date();
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var PM = false
var colonGray = false
// function to get and display the time
function showTime() {
// set variables
currentTime = new Date();
hours = currentTime.getHours()
minutes = currentTime.getMinutes()
// adjust for military time and set the PM variable
if (hours >= 12) {
PM = true
}
else {
PM = false
}
if (hours >= 13) {
hours = hours - 12
}
if (hours == 0) {
hours = 12
}
// is the hour a single digit?
if (hours <= 9) {
document.getElementById('h1').src = 'numbers/blank_digit.png'
document.getElementById('h2').src = 'numbers/n' + hours + '.png'
// set the am/pm
if (PM == true) {
document.getElementById('pm').src = 'numbers/pm.png'
}
else {
document.getElementById('pm').src = 'numbers/am.png'
}
}
// if the hour is a 2 digit number
else if (hours >= 10 && hours <= 12) {
document.getElementById('h1').src = 'numbers/n1.png'
if (hours == 10) {
document.getElementById('h2').src = 'numbers/n0.png'
}
else if (hours == 11) {
document.getElementById('h2').src = 'numbers/n1.png'
}
else if (hours == 12) {
document.getElementById('h2').src = 'numbers/n2.png'
}
// set the am/pm
if (PM == true) {
document.getElementById('pm').src = 'numbers/pm.png'
}
else {
document.getElementById('pm').src = 'numbers/am.png'
}
}
// set the minutes
if (minutes <= 9) {
document.getElementById('m1').src = 'numbers/n0.png'
document.getElementById('m2').src = 'numbers/n' + minutes + '.png'
}
else if (minutes >= 10 && minutes <= 19) {
document.getElementById('m1').src = 'numbers/n1.png'
minutes = minutes - 10
document.getElementById('m2').src = 'numbers/n' + minutes + '.png'
}
else if (minutes >= 20 && minutes <= 29) {
document.getElementById('m1').src = 'numbers/n2.png'
minutes = minutes - 20
document.getElementById('m2').src = 'numbers/n' + minutes + '.png'
}
else if (minutes >= 30 && minutes <= 39) {
document.getElementById('m1').src = 'numbers/n3.png'
minutes = minutes - 30
document.getElementById('m2').src = 'numbers/n' + minutes + '.png'
}
else if (minutes >= 40 && minutes <= 49) {
document.getElementById('m1').src = 'numbers/n4.png'
minutes = minutes - 40
document.getElementById('m2').src = 'numbers/n' + minutes + '.png'
}
else if (minutes >= 50 && minutes <= 59) {
document.getElementById('m1').src = 'numbers/n5.png'
minutes = minutes - 50
document.getElementById('m2').src = 'numbers/n' + minutes + '.png'
}
var theTimeout = setTimeout('showTime()',500)
if (colonGray == false) {
document.getElementById('colon').src = 'numbers/gray_colon.png'
colonGray = true
}
else if (colonGray == true) {
document.getElementById('colon').src = 'numbers/colon.png'
colonGray = false
}
}
// ]]>
</script>
</head>
<!-- Hint: put an onload attribute into the <body> tag. -->
<body onLoad= "showTime();">
<h1>CIT041J Program 5 - Timers</h1>
<div id="clock">
The current time is:<br />
<img src="numbers/blank_digit.png" name="h1" width="30" height="40" alt=" " /><img
src="numbers/blank_digit.png" name="h2" width="30" height="40" alt=" " /><img
src="numbers/colon.png" name="colon" width="20" height="40" alt=" " /><img
src="numbers/blank_digit.png" name="m1" width="30" height="40" alt=" " /><img
src="numbers/blank_digit.png" name="m2" width="30" height="40" alt=" " /><img
src="numbers/blank_digit.png" name="pm" width="80" height="40" alt=" " />
</div>
</body>
</html>