You are here:
Daily background Javascript
Create the illusion of daily activity at your site with this neat script to cycle the background colours. This was one of the first scripts I published and it's about ten years old now. I've updated it so it will work with websites that use stylesheets to set the background colour, including this one.
You're allowed to include this script on your website for free. A link to this site would be appreciated but is not required. Please note that other content on this website cannot be reproduced without permission. Click here for further clarification
Web surfers are tough on sites. Even covering a slow moving subject area (eg grass growing, paint drying) the pressure is on to update daily. This routine will change your background color each day of the week, creating the illusion of rampant activity and making the site look fresh each day. Call it with a list of the colors you want for each day, starting with Sunday. Supply colors as rgb values (eg "#ffffff") or as colour names (eg "white"). This program has two parts to it. Most of it is just pasted between the <HEAD> tags exactly as it appears in the box below. This sets the code up ready to be called.
/*
SM_dailyBgColor()
This function automatically changes the page's background color each day of the week.
Author: Sean McManus
Author URL: http://www.sean.co.uk/
Usage: SM_dailyBgColor ("mondaycolor", "tuesdaycolor", "wednesdaycolor", "thursdaycolor", "fridaycolor", "saturdaycolor", "sundaycolor");
*/
function SM_dailybg(sunday,monday,tuesday,wednesday,thursday,friday,saturday)
{
cols=new Object();
cols[0]=sunday;
cols[1]=monday;
cols[2]=tuesday;
cols[3]=wednesday;
cols[4]=thursday;
cols[5]=friday;
cols[6]=saturday;
today=new Date();
day=Math.round(today.getDay());
document.bgColor=cols[day];
document.body.style.background=cols[day];
}
</script>
To actually change the colour, this command is added to the <BODY> tag:
onLoad='SM_dailybg("#6699cc", "#9966cc", "#cc9966", "#ccccff", "#cc99cc", "#ffff99", "#000000");'
Obviously, the choice of colours will be your own, but start with Sunday and then put them in the order of the days. This page is running the script itself, so you should see the following background colours:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Those colours were chosen to work within the design of this screen, which means they sometimes repeat other colours from the screen. The colour you need to be looking at is the one that frames the whole of the webpage, the colour nearest the edge of the browser.
Remember, you don't need to change any of the published code, you just need to add the command above and adapt the onLoad tag. If you're not sure how it works, try looking at the source of this page.
Related links
- If Goya had learned Javascript - famous painter demystifies Javascript rollovers
- Javascript Smart Marketing Toolkit - make your site more responsive with these tools for managing cookies, reacting to times and dates and cycling banner adverts
- Syndication scripts - promote your website by syndicating its content to other sites. This tutorial shows how.
- Javascript include file creator - takes the hard work out of making Javascript syndication files
- Free navigation Javascripts - menus, keypress control and more using a dash of Javascript
- Javascript delay / wait / pause script - want to set something to happen after a delay or want to pause the program? See this concise guide and naughty script.