[Contents]

jsEditor - How to get a list of colours

Aim: to demonstrate how get a list of colours

With a new document, right-click on the HTML mode button (or on the document if you are in HTML mode) and select Colour and then Hex Colour. Choose a colour from the dialogue box. I chose red and got:

#FF0000

Then I chose green and blue so my list of colours was:

#FF000

#00FF00

#0000FF

Select the colours and copy them. Open the Array Wizard and paste the list in the left box.

Call the array myColours and click OK. I got the following  code:

myColours=new Array(3);

myColours[0]="#FF0000";

myColours[1]="#00FF00";

myColours[2]="#0000FF";

This demonstrates how easy it is to get a list of colours with the jsEditor and turn them into an array.

Add the following code:

i=0;

function colourFunction(){

document.bgColor=myColours[i]

timerID=setTimeout("colourFunction()","2000")

i++

i=i%3

}

 

<body onLoad="colourFunction()">

<FORM NAME="form1">

<INPUT TYPE="button" VALUE="Stop!!!" onClick="clearTimeout(timerID)">

 

</FORM>

</body>

And then surround the JavaScript code with JavaScript tags. I got this as the whole page:

<SCRIPT LANGUAGE="JAVASCRIPT">

<!--//

myColours=new Array(3);

myColours[0]="#FF0000";

myColours[1]="#00FF00";

myColours[2]="#0000FF";

i=0;

function colourFunction(){

document.bgColor=myColours[i]

timerID=setTimeout("colourFunction()","2000")

i++

i=i%3

}

//-->

</SCRIPT>

<body onLoad="colourFunction()">

<FORM NAME="form1">

<INPUT TYPE="button" VALUE="Stop!!!" onClick="clearTimeout(timerID)">

</FORM>

</body>

Note I haven't bothered with all the HTML block tags because if I use this code, I will copy the JavaScript into the HEAD of my real page and copy bits of the rest into the really page. If this were to be your page, you might surround the JavaScript with HEAD tags and then surround the whole page with HTML tags.

Press F9 or click Preview to view the code. I got an awful flashing of different colours (which is why I added the button to stop it!)

You have learned:

Next: Adding breaks and lists

[Contents]

Remember to give feedback!