It's Sean!

UK freelance journalist, author
and copywriter Sean McManus

Printed from www.sean.co.uk. © Sean McManus.
Home > Articles > Webmaster resources > Javascript examples > SM_dailyBgColor()

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.

<script>
/*
SM_dailyBgColor()
This function automatically changes the page's background color each day of the week.
Author: Sean McManus
Author URL: https://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:

Sunday #6699cc
Monday #9966cc
Tuesday #cc9966
Wednesday #ccccff
Thursday #cc99cc
Friday #ffff99
Saturday #000000

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