You are here: irt.org | Articles | JavaScript | Date and Time | Time of Day [ previous next ]
Published on: Thursday 12th June 1997 By: Martin Webb
This article will describe how to show different images based on the current time, and how to create a digital clock, using a form and using images.
The image you see here will be different depending on what time your computer is set to.
If it is after 6am and before 6pm then you'll see a picture of the sun, otherwise you'll see a picture of the moon.
The code used to do this is fairly simple:
<SCRIPT LANGUAGE = 'JavaScript'><!--
var date = new Date();
var hours = date.getHours();
if ( (hours < 6) || (hours > 18) )
document.write("<IMG SRC='moon.gif'>")
else
document.write("<IMG SRC='sun.gif'>");
//--></SCRIPT>This can then be extended to show even smaller intervals of time, for example every hour.
The code required to show the clock:
<SCRIPT LANGUAGE = 'JavaScript'><!--
var date = new Date();
var hours = date.getHours();
document.write("<IMG SRC='clock");
document.write((hours > 11) ? hours - 12 : hours);
document.write(".gif'>");
//--></SCRIPT>Note, getHours() returns a value from 0 to 23. The clock images have been stored as clock0.gif to clock11.gif. Therefore to load the correct image we first check if hours is greater than 11, and is it is we subtract 12 from it.
It isn't impossible to create a fully functioning analogue clock using image replacement, although it would require a large number of images to display the correct positioning of the hour and second hand.
An easier means of showing the real time is to use a digital format. This method uses a form textbox which is updated every second:
The code for the digital clock:
<FORM NAME="clock">
<INPUT NAME="face" TYPE="TEXT" VALUE="hh:mm:ss" SIZE=8>
</FORM>
<SCRIPT LANGUAGE="JavaScript"><!--
updateClock();
function updateClock() {
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
document.clock.face.value = ((hours < 10) ? '0' + hours : hours) +
':' + ((minutes < 10) ? '0' + minutes : minutes) +
':' + ((seconds < 10) ? '0' + seconds : seconds);
setTimeout("updateClock()",1000);
}
//--></SCRIPT>An alternative approach is to use images which, although only supported in JavaScript 1.1, allows greater control over the look and feel of the clock:
The code required to display the image clock:
<SCRIPT LANGUAGE="JavaScript1.1"><!--
document.write("<IMG SRC='0.gif' NAME='h10' HEIGHT=16 WIDTH=16>");
document.write("<IMG SRC='0.gif' NAME='h1' HEIGHT=16 WIDTH=16>");
document.write("<IMG SRC='sep.gif' HEIGHT=16 WIDTH=7>");
document.write("<IMG SRC='0.gif' NAME='m10' HEIGHT=16 WIDTH=16>");
document.write("<IMG SRC='0.gif' NAME='m1' HEIGHT=16 WIDTH=16>");
document.write("<IMG SRC='sep.gif' HEIGHT=16 WIDTH=7>");
document.write("<IMG SRC='0.gif' NAME='s10' HEIGHT=16 WIDTH=16>");
document.write("<IMG SRC='0.gif' NAME='s1' HEIGHT=16 WIDTH=16>");
image0 = new Image();image0.src = "0.gif";
image1 = new Image();image1.src = "1.gif";
image2 = new Image();image2.src = "2.gif";
image3 = new Image();image3.src = "3.gif";
image4 = new Image();image4.src = "4.gif";
image5 = new Image();image5.src = "5.gif";
image6 = new Image();image6.src = "6.gif";
image7 = new Image();image7.src = "7.gif";
image8 = new Image();image8.src = "8.gif";
image9 = new Image();image9.src = "9.gif";
updateClockImage();
function updateClockImage() {
var time = new Date();
document.images['s1'].src =
eval("image" + (time.getSeconds() % 10) +".src");
document.images['s10'].src =
eval("image" + (Math.floor(time.getSeconds() / 10)) +".src");
document.images['m1'].src =
eval("image" + (time.getMinutes() % 10) +".src");
document.images['m10'].src =
eval("image" + (Math.floor(time.getMinutes() / 10)) +".src");
document.images['h1'].src =
eval("image" + (time.getHours() % 10) +".src");
document.images['h10'].src =
eval("image" + (Math.floor(time.getHours() / 10)) +".src");
setTimeout("updateClockImage()",1000);
}
//--></SCRIPT>Once you have find out what the current date and time is, you can even display different images to represent the seasons of the year, or even the festivities.
For example: Christmas, New Year, Chinese New Year, Easter, Thanksgiving, and birthdays.
Monday's child is full of grace