How to Create a Date Aware Web Page

Use Javascript to Calculate the Day of the Year

Dec 21, 2008
Mark Alexander Bain

A Date Aware Web Page - Mark Alexander Bain

It's easy to keep a web site seasonal - just continually edit it to keep it current; or - make it date aware with Javascript

Any Google users cannot fail to see that the image changes on a daily basis (if not more) and they always show something appropriate for the time of year; for the Christmas lead-up the image may be Father Christmas , or a snowman, or just a Christmas scene.

For a few days before Valentine's Day there may be hearts and roses. For New Year's day there may be scythes or party hats. Of course that doesn't necessarily mean that there's a Google web page developer continually logging on and making changes - it just means that the Google web site is a date aware application; and that's something that any web page can produce with Javascript.

Creating a Date Aware Web Page

The date aware web page will need to:

calculate the current date
calculate if a key day of the year is approaching
display a random picture that is appropriate for that key date
for any other day display one of set of default images

and so the web page may display (for example) one of three Christmas scenes for 7 days before Christmas.

Adding an Image Tag to a Web Page

A image tag can easily be added to a web page by using HTML (HyperText Markup Language):

In this case no actual image is defined - that will be done by using Javascript.

Displaying Random Images with Javascript

In this example lists of the images to be displayed are stored in a number of arrays:

var default_images = new Array ("default1.jpg", "default2.jpg", "default3.jpg");

var christmas_images = new Array ("christmas1.jpg", "christmas2.jpg", "christmas3.jpg");

var valentine_images = new Array ("valentine1.jpg", "valentine2.jpg", "valentine3.jpg");

The actual number of images does not matter because Javascript will generate a random number according to the length of the array passed to it:

function random_image (img, img_array) {

var img = document.getElementById(img);

var img_index=Math.floor(Math.random()*img_array.length)

img.src = img_array[img_index];

}

This function is run by using the Javascript code:

random_image ("main_image", default_images);

This, of course, will display one of the images listed and so the next stage is to select the array according to the time of year.

Deciding on the Day of the Year

The code for calculating the day of the year is quite simple - it subtracts the current date from January 1st (although the answer is initially in milliseconds):

function day_of_year (day) {

var jan_one = new Date(day.getFullYear(),1,0,0,0,0);

var doy = 1 + parseInt ((day - jan_one) / (1000 * 60 * 60 * 24));

return doy;

}

The result is the day of the year for the inputted date.

Displaying Images for the Day of the Year

The starting point for this next function is to calculate the day of the year for each of the key dates:

function show_date_image () {

var today = new Date;

var doy = day_of_year (today);

var valentine = day_of_year(new Date (today.getFullYear(),1,14));

var christmas = day_of_year(new Date (today.getFullYear(),11,25));

Then, depending how close the current day of the year is to a key day of the year, the appropriate array is sent to the random_image function:

switch (true){

case ((doy < valentine) && ( valentine - doy) < 7):

random_image ("main_image", valentine_images);

break;

case ((doy < christmas) && ( christmas - doy) < 14):

random_image ("main_image", christmas_images);

break;

default:

random_image ("main_image", default_images);

}

This can then be run from the web page:

show_date_image ();

</script>

And then the web page programmer can leave the web page safe in the knowledge that, regardless of the time of year, the appropriate images will be displayed.

Mark Alexander Bain - Mark Alexander Bain is a writer, Mo Bro and consultant for all aspects of software development at dsquared. He has also written regularly ...