HTML5 website that changes with the season

First of all, you'll need to know in what date range each season is. You could also try finding the days of the year for each season, and use something like this to check the current day of the year: <note: the lines with the '//' s are just comments, and are not exactly part of the "code">

var today= new Date (); 

var first= new Date (today.getFullYear (), 0); 

var day_of_year= (today - first) / (24 * 60 * 60 * 1000); 

// The difference between today and the 

// first day of the year, 

// divided by the number of 

// milliseconds in each day, 

// which is [ 24 hours -> 

// 60 minutes in each hour -> 

// 60 seconds in each minute -> 

// 1000 milliseconds in each second ]

Note, though, that the above code will set day_of_year to a floating-point value; for example, it got this when I ran that code today: 328.60445413194446

You'll just either have to use Math.floor (), or parseInt (), to round it down to the whole number.

As an example, the following HTML5 code - which needs to be placed after the above day-of-the-year check - will display a certain value if the current day of the year is between (and including) 300 and 350:

<div id="something"> 

<script type="text/javascript"> 

// Check if day_of_year is [greater than or equal to] 300, or 

// if day_of_year is [less than or equal to] 350 

if ( (day_of_year >= 300) | (day_of_year <= 350) ){ 

// If so, display some HTML 

document.write ('<span style="color: #FF8888; font-face: Arial;"> Hello, I\'m ... ; today is in the range of the days of the year 300 and 350 </span> ...'); 

} 

</script> 

</div>

That way you can run different code, based on what range of days the current day of the year lies in.

If you're using a server-side language, however, then you could also do something similar using that, if you want to.