Rotate Header Based on Time of Day
by Thai on March 16, 2010
I made this because I’ve seen a php tutorial on NETTUTS that’s pretty cool and thought of a client side version just for the hell of it. It basically changes the header based on the time of day it is. You can use it to change your site’s logo too. The script is insanely simple and didn’t really need commenting. There’s a default class so that if the user decides to turn off Javascript, it’ll fall back to your default image.
//create date object and get the time
var date = new Date();
var time = date.getHours();
var noon = 12;
var midnight = 24;
var dinner = 18;
//cache the header div
var header = $("#header");
if(time < noon ){
header.removeClass("default").addClass("morning");
}else if(time <= midnight && time >= dinner){
header.removeClass("default").addClass("night");
}else{
header.removeClass("default").addClass("noon");
}
});//closing tag for jQuery contructor
Leave your comment