...

View Full Version : Random Color Changer library script



Hamza7
06-17-2011, 10:42 PM
I made my first JavaScript library "Random Color Changer", it include a single function called randomColor(element,colorType) , it accept 2 optional arguments, [element] is the HTML element which we apply the color on it, [colorType] is the selected type of color, I mean the font color or the background color, this argument can be only the string "color" or the string "backgroundColor". Example:
randomColor(document.body,'backgroundColor')
If you call this function without any arguments it returns the Hex value of the color as a string. Example: "#A532B9"
This library was tested on FireFox 4, Chrome 12, IE 9 and worked well.
The script RandomColorChanger.js can be found with example.html page in the zip file in attachment.

Hamza7
06-19-2011, 09:53 PM
I made this version of Random Color Changer that can be used as bookmarklet in your browser (at least in FireFox) that can change the background color of any page, simply put the code below in one HTML page then drag and drop the resulted link in the bookmarks bar (sorry, I can' post the link here because the forum link tool doesn't support javascript: protocol).
Here is the source code (not formated well)

<a href='javascript:
var x_1 = Math.floor(Math.random()*16);
var x_2 = Math.floor(Math.random()*16);
var x_3 = Math.floor(Math.random()*16);
var x_4 = Math.floor(Math.random()*16);
var x_5 = Math.floor(Math.random()*16);
var x_6 = Math.floor(Math.random()*16);
switch(x_1){
case 10 :
x1 = "A";
break;
case 11 :
x1 = "B";
break;
case 12 :
x1 = "C";
break;
case 13 :
x1 = "D";
break;
case 14 :
x1 = "E";
break;
case 15 :
x1 = "F";
break;
default :
x1 = x_1;}
switch(x_2){
case 10 :
x2 = "A";
break;
case 11 :
x2 = "B";
break;
case 12 :
x2 = "C";
break;
case 13 :
x2 = "D";
break;
case 14 :
x2 = "E";
break;
case 15 :
x2 = "F";
break;
default :
x2 = x_2;}
switch(x_3){
case 10 :
x3 = "A";
break;
case 11 :
x3 = "B";
break;
case 12 :
x3 = "C";
break;
case 13 :
x3 = "D";
break;
case 14 :
x3 = "E";
break;
case 15 :
x3 = "F";
break;
default :
x3 = x_3;}
switch(x_4){
case 10 :
x4 = "A";
break;
case 11 :
x4 = "B";
break;
case 12 :
x4 = "C";
break;
case 13 :
x4 = "D";
break;
case 14 :
x4 = "E";
break;
case 15 :
x4 = "F";
break;
default :
x4 = x_4;}
switch(x_5){
case 10 :
x5 = "A";
break;
case 11 :
x5 = "B";
break;
case 12 :
x5 = "C";
break;
case 13 :
x5 = "D";
break;
case 14 :
x5 = "E";
break;
case 15 :
x5 = "F";
break;
default :
x5 = x_5;}
switch(x_6){
case 10 :
x6 = "A";
break;
case 11 :
x6 = "B";
break;
case 12 :
x6 = "C";
break;
case 13 :
x6 = "D";
break;
case 14 :
x6 = "E";
break;
case 15 :
x6 = "F";
break;
default :
x6 = x_6;}var color = "#"+x1.toString()+x2.toString()+x3.toString()+x4.toString()+x5.toString()+x6.toString();document.body.s tyle.backgroundColor=color;void color;'>Random background color</a>

Alex Vincent
06-20-2011, 05:10 AM
Methinks you might benefit from learning about Number.toString(base).

Hamza7
06-20-2011, 06:46 PM
Methinks you might benefit from learning about Number.toString(base).
You are right, I think that it will be easy if I used Number.toString(16) instead of writing big pieces of code using switch statement :thumbsup: I will try to edit my script.
----------------------------------------------------------------------------------------------------------
Sorry I think that the attachments are not visible I don't know why, alternatively you can download from here http://www.filesonic.com/folder/6978321

Lerura
06-20-2011, 07:15 PM
There is no need for such huge and advanced script to create a color.
This makes the value:

<script>
Digits=['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
function RandomHexColor(){
var hexColor='#';
for (N=0;N<6;N++){
hexColor+=Digits[Math.floor(Math.random()*16)];
}
return hexColor;
}
</script>and it can be applied by this:
<a href="javascript:document.body.style.backgroundColor=RandomHexColor();">Random Background Color</a>

Hamza7
06-20-2011, 08:48 PM
There is no need for such huge and advanced script to create a color.
This makes the value:

<script>
Digits=['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
function RandomHexColor(){
var hexColor='#';
for (N=0;N<6;N++){
hexColor+=Digits[Math.floor(Math.random()*16)];
}
return hexColor;
}
</script>and it can be applied by this:
<a href="javascript:document.body.style.backgroundColor=RandomHexColor();">Random Background Color</a>

:thumbsup:

Alex Vincent
06-21-2011, 06:02 AM
I guarantee you, you don't need that Digits array.

Lerura
06-21-2011, 12:50 PM
I guarantee you, you don't need that Digits array.
Explain!

Alex Vincent
06-22-2011, 06:44 AM
Well, as I said earlier, Number.prototype.toString(16) can save you some trouble.

For instance, if I type (14).toString(16) into my JavaScript console, I get back "e". Your line:


hexColor+=Digits[Math.floor(Math.random()*16)];

could simply be rewritten as:


hexColor += Math.floor(Math.random()*16).toString(16)

For that matter, you could simply say:


var hexColor = "#" + Math.floor(Math.random() * Math.pow(16, 6)).toString(16);


and be done with it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum