Background effects – A cool JavaScript tip

Here is a cool Javascript tip that will change the background color over time. With a few modifications, you can use this tip to display all the colors of the rainbow in the background. This tip describes how to create a fading web page background.

Click here to see this script in action

Using the bgColor property of the JavaScript window object, we can change the background color. Here is the code:

var c = new Array("00", "11", "22", "33", "44", "55",
"66", "77", "88", "99", "AA", "BB", "CC", "DD", "EE", "FF");

x = 0;

function bg_eff()
   {
   col_val = "#FFFF" + c[x];
   document.bgColor=col_val;
   x++;
   if (x == 16)
      {
      clearInterval(change_bg);
      }
   }

change_bg = setInterval("bg_eff()", 250);

The color values are stored in an array c. The function bg_eff() assigns a color value to variable col_val and then sets the bgColor property to this value. The function is called after every 250 milliseconds using the setInterval() method. On each call to the function the value of variable x is increased by one. When x equals 15, the clearInterval() method is invoked that stops the setInternval() method.