color Wheel

This JavaScript will change the background from one color to the next for each of the 10 colors then it starts the loop over again! There is also an On/Off button to let you start and stop the JavaScript.

/*******************************************************
*     MYCPLUS Sample Code - https://www.mycplus.com     *
*                                                     *
*   This code is made available as a service to our   *
*      visitors and is provided strictly for the      *
*               purpose of illustration.              *
*                                                     *
* Please direct all inquiries to saqib at mycplus.com *
*******************************************************/

<!-- THREE STEPS TO INSTALL COLOR WHEEL:

   1.  Put the specified code into the HEAD of your HTML document
   2.  Add the onLoad event handler to the BODY tag
   3.  Copy the last coding into the BODY of your HTML document  -->

<!-- STEP ONE: Copy this code into the BODY of your HTML document  -->

<head>

<script LANGUAGE="JavaScript">

<!-- Original: Eric Stremming <estremming@hotmail.com>  -->
<!-- Web Site: http://www.geocities.com/SunsetStrip/Club/5970  -->

<!--Total Java Scripts 99 - Next Step Software-->

<!-- Begin
var pos = 10;
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
   }
}
var col=new initArray("4b","5b","8b","8b");
function stop() {
document.bgColor = '#FFFFFF';
clearTimeout(loopID);
}
function start() {
col[1]="red"
col[2]="yellowgreen"
col[3]="yellow"
col[4]="whitesmoke"
col[5]="white"
col[6]="wheat"
col[7]="violet"
col[8]="turquoise"
col[9]="tomato"
col[10]="thistle"
pos++;
if (pos<0||pos>10) {
pos = 0;
}
document.bgColor = col[pos];
loopID = setTimeout("start()",50);
}
// End -->
</script>

<!-- STEP TWO: Add the onLoad event handler to the BODY tag  -->

<body onLoad="start()">

<!-- STEP THREE: Copy this last code into the BODY of your HTML document  -->

<center>
<form>
<input type="button" value="On" onClick="start()">
<input type="button" value="Off" onClick="stop()">
</form>
</center>

<!-- Script Size:  1.55 KB  -->

/*******************************************************

* MYCPLUS Sample Code - https://www.mycplus.com *

* *

* This code is made available as a service to our *

* visitors and is provided strictly for the *

* purpose of illustration. *

* *

* Please direct all inquiries to saqib at mycplus.com *

*******************************************************/

<!-- THREE STEPS TO INSTALL COLOR WHEEL:

1. Put the specified code into the HEAD of your HTML document

2. Add the onLoad event handler to the BODY tag

3. Copy the last coding into the BODY of your HTML document -->

<head>

<!-- Begin

var pos = 10;

function initArray() {

this.length = initArray.arguments.length;

for (var i = 0; i < this.length; i++) {

this[i] = initArray.arguments[i];

}

var col=new initArray("4b","5b","8b","8b");

function stop() {

document.bgColor = '#FFFFFF';

clearTimeout(loopID);

}

function start() {

col[1]="red"

col[2]="yellowgreen"

col[3]="yellow"

col[4]="whitesmoke"

col[5]="white"

col[6]="wheat"

col[7]="violet"

col[8]="turquoise"

col[9]="tomato"

col[10]="thistle"

pos++;

if (pos<0||pos>10) {

pos = 0;

}

document.bgColor = col[pos];

loopID = setTimeout("start()",50);

}

// End -->

</script>

<form>

</form>

</center>

About The Author

M. Saqib

color Wheel

About The Author

M. Saqib

Related Posts

Blinker

JavaScript Calculator Program

Difference Between [] and {}: Arrays vs. Objects in JavaScript

Random Background