Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt.Org

Related items

Easter

The 3rd Saturday in November

Born on the 4th of July

The Chinese New Year

What sign are you?

Monday's child is full of grace

32 years 8 months 24 days

Blind Date

Travelling Through Time

Date Spinner

Time of Day

You are here: irt.org | Articles | JavaScript | Date and Time | Time of Day [ previous next ]

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.

Related items

Easter

The 3rd Saturday in November

Born on the 4th of July

The Chinese New Year

What sign are you?

Monday's child is full of grace

32 years 8 months 24 days

Blind Date

Travelling Through Time

Date Spinner

Feedback on 'Time of Day'

©2018 Martin Webb