It's Sean!

UK freelance journalist, author
and writer 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: 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:

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

Books by Sean McManus

Scratch Programming in Easy Steps

Scratch Programming in Easy Steps

Raspberry Pi For Dummies

Raspberry Pi For Dummies

Learn to program with the Scratch programming language, widely used in schools and colleges.

Set up your Pi, master Linux, learn Scratch and Python, and create your own electronics projects.

Coder Academy

Coder Academy

Cool Scratch Projects in Easy Steps

Cool Scratch Projects in Easy Steps

Learn to make games and other programs in Scratch 2.0, and make a web page in HTML, with this highly interactive book for 7-10 year olds.

Discover how to make 3D games, create mazes, build a drum machine, make a game with cartoon animals and more!

More books

Recommended articles

Stylised coloured photo of a synth

Discover my music and home recording articles

Interested in starting home recording? Follow me as I start recording, using instruments such as the Novation MiniNova and Korg Kaossilator, and share my synth and sample-based music online.

Scratch cat and rainbow circle

10-block demos for Scratch programming

Lots of people of all ages are learning to program with Scratch. Discover some useful tricks and techniques in my 10-block Scratch demos, including special effects you can drop into your games.

Paper Raspberry Pi case

Download free book chapters and more!

Download a free case for your Raspberry Pi, and free chapters from my books about the Raspberry Pi, Scratch, web design and more!

©Sean McManus. www.sean.co.uk.