Tags

, ,

I have six different stylesheets for different times of the day.

From 5 am to 8 am, it displays the “sunrise” theme.
From 8 am to 12 pm, it displays the “morning” theme.
From 12 pm to 3 pm, it displays the “noon” theme.
From 3 pm to 6 pm, it displays the “afternoon” theme.
From 6 pm to 9 pm, it displays the “sunset” theme.
And finally, from 9 pm to 5 am, it displays the “twilight” theme.

Here’s the code I used to make it happen:

<SCRIPT LANGUAGE="JavaScript"><!-- Beginfunction 
getCSS(){datetoday = new Date();timenow=datetoday.getTime();
datetoday.setTime(timenow);thehour = datetoday.getHours();

if (thehour > 20)display = "tree_twilight.css";
else if (thehour > 17)display = "tree_sunset.css";
else if (thehour > 14)display = "tree_afternoon.css";
else if (thehour > 11)display = "tree_noon.css";
else if (thehour > 7)display = "tree_morning.css";
else if (thehour > 4)display = "tree_sunrise.css";
else if (thehour > 1)display = "tree_twilight.css";
elsedisplay = "tree_sunset.css";

var css = '';

document.write(css);// End -->}</script>
<script language="javascript">getCSS();</script> 

You can select a default stylesheet, to account for folks with javascript disabled, by adding the following:

 
<noscript><link rel="stylesheet" 
 href="tree_sunset.css" type="text/css"></noscript>
Advertisements