Date-Dependent Code

One of the cool things you can do with JavaScript is to use it to customize your page, in style and content. This page describes and demonstrates using JavaScript to customize a page to depend on the date. In real life, you might use this ability to change the style of the page based on the seasons (fall colors in September and October, and so forth). You might show a different picture based on the month or the day of the week. In principle, there are lots of different kinds of things you could do, and lots of different time conditions you could use.

Customization Example

For this demonstration, though, we don't want you to have to wait until Christmas to see the special Christmas theme, so instead of using slow-changing numbers like the month and day, we'll use a fast-changing number, namely the second from a Date object.

To be specific, when you loaded this page, the time was HH:MM:SS, so all of our calculations and customizations will be based on the seconds, namely SS.

For fun, we'll use a Hogwarts theme, like the magical re-decorating of the Great Hall when Gryffindor overtakes Slytherin in the Quidditch Cup:

More specifically, when Slytherin wins:

Otherwise, when Gryffindor wins:

Customizations in Action

Just so you know:

insert taunt here

With many thanks to:

Stepping Back

If we step back for a moment and think about this more abstractly, this page demonstrates how to customize the content (text and images) and style of a page. I'm sure you can think of other ways to customize a page, but they are likely to be based on changing the content or style.

How It's done

There are lots of ways this could be done. Here's how we did the effects:

The effects above are chosen by code that depends on a Date object, using methods to extract the number of seconds and conditionals (if statements) to choose the code to run.

Use view source on this page to see exactly how we did it.