WebSys Fall 2006
Stupid JavaScript Tricks: User Selectable Background Color Source


<script>

function newbg_color(color) {
   stop_annoying_me();
   document.bgColor=color;
}

// this one cycles through colors (really annoying!)
var annoy=0;
var cnt=0;

function cycle () {
   annoy=1;
   annoy_me();
}
  
// turns off the annoying color cycling.
function stop_annoying_me() {
   annoy=0;
}

// create and initialize an array that holds the color names we will
// cycle through (to be annoying).
 
var colors = new Array("red", "blue", "white", "green", "yellow", "purple");

// changes the background color to colors[cnt] (cnt is a global).
// also schedules the next run of this function 1/2 second from now
// (5000 ms)
function annoy_me( ) {
   if (annoy==1) {   
      document.bgColor = colors[cnt];
      cnt++;
      if (cnt==colors.length) {
         cnt=0;
      }
      window.setTimeout("annoy_me()",500);
   }
}

</script>

<div>

<center>
<table><tr><td><image src="eat.gif" /></td>
<td width="100"></td>
<td><image src="eat.gif" /></td>
<td width="100"></td>
<td><image src="eat.gif" /></td>
<td width="100"></td>
<td><image src="eat.gif" /></td>
</tr>
</table>

<h2 style="text-align:center">Select your favorite background color:</h2>


<table cellspacing="0" cellpadding="10">
<tr>

<td>
<input type="button" class="but" value="red" style="background-color:red;"
       onClick="newbg_color('red');"/>
</td>

<td>
<input type="button" class="but" value="blue" style="background-color:blue;"
       onClick="newbg_color('blue');"/>
</td>

<td>
<input type="button" class="but" value="white" style="background-color:white;"
       onClick="newbg_color('white');"/>
</td>

<td>
<input type="button" class="but" value="purple" style="background-color:purple;"
       onClick="newbg_color('purple');"/>
</td>

<td>
<input type="button" class="but" value="green" style="background-color:green;"
       onClick="newbg_color('green');"/>
</td>

<td>
<input type="button" class="but" value="yellow" style="background-color:yellow;"
       onClick="newbg_color('yellow');"/>
</td>

<td>
<input type="button" class="but" value="annoy me" style="background-color:gray;"
       onClick="cycle();"/>
</td>
</tr></table>
</center>

</div>

WebSys Fall 2006