Time of Day
You are here: irt.org | Articles | JavaScript | Date and Time | Time of Day
Published on: Thursday 12th June 1997 By: Martin Webb
Introduction
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.
Night and Day
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>
|
24 Hour Clock
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.
A Digital Clock
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>
|
A Digital Image Clock
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>
|
Homework
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.
Feedback on 'Time of Day'
- Time of Day - Nermin Cengic Saturday September 15, 2007 at 22:01:02
- Time of Day - Mark McVicker 20:42:54 4/18/00
View the profile on Martin Webb and the list of other Articles by Martin Webb.
| 