Displaying Random Font Colours

@briankFeb 10.2004

Hey all,

Currently a bit of a JavaScript novice so sorry up front if this is a stupid question ..

Does anyone know how to set a result display font to random -I know how to set a standard font, to e.g. red:

<!– hide

var txt = “This is some sample text”;

document.writeln(txt.fontcolor(‘red’));

// unhide –>

</script>

I’ve tried:

document.writeln(txt.fontcolor(‘random’)); AND
document.writeln(txt.fontcolor(”));

– but no luck ..

Can you help ? ?

to post a comment

JavaScript

6 Comments(s) _↴

@oleragFeb 10.2004 — #Searching [color=red]color[/color] found this [URL=http://forums.webdeveloper.com/showthread.php?s=&threadid=26195&highlight=color]thread[/URL] by, once again, [b]fredmv[/b]. He and [b]Pittiman[/b] (besides others) always seem to give consistent hits.

@fredmvFeb 10.2004 — #[i]Originally posted by olerag [/i]

[B]Searching [color=red]color[/color] found this [URL=http://forums.webdeveloper.com/showthread.php?s=&threadid=26195&highlight=color]thread[/URL] by, once again, [b]fredmv[/b]. He and [b]Pittiman[/b] (besides others) always seem to give consistent hits. [/B][/QUOTE]Isn't the search feature great? More newbies should figure out how it works... ?

As for the original poster: welcome to the forums; I've just put this together and I believe it's what you're looking for.

&lt;script type="text/javascript"&gt;
 //&lt;![CDATA[
 String.prototype.trim = function()
 {
 return this.replace(/s/g, '');
 }
 
 <i>	</i>String.prototype.setColor = function(color)
 <i>	</i>{
 <i>	</i>	var h =
 <i>	</i>	[
 <i>	</i>		'0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
 <i>	</i>		'a', 'b', 'c', 'd', 'e', 'f'
 <i>	</i>	], i = 0, out = '';
 
 <i>	</i>	while(i++ &lt; 6) out += h[Math.floor(Math.random()*h.length)];
 
 <i>	</i>	return '&lt;span style="color: ' + (color.trim().toLowerCase() == 'random' ? out : color) + ';"&gt;' + this + '&lt;/span&gt;';
 <i>	</i>}
 
 <i>	</i>var foo = 'Hello, World!&lt;br /&gt;', d = document;
 
 <i>	</i>d.write(foo.setColor('#900'));
 <i>	</i>d.write(foo.setColor('#090'));
 <i>	</i>d.write(foo.setColor('#009'));
 <i>	</i>d.write(foo.setColor('random'));
 <i>	</i>d.write(foo.setColor('random'));
 <i>	</i>d.write(foo.setColor('random'));
 //]]&gt;
 &lt;/script&gt;

@briankauthorFeb 11.2004 — #Cheers guys - much appreciated ..

?

@Paul_JrFeb 11.2004 — #[i]Originally posted by fredmv [/i]

[B]Isn't the search feature great? More newbies should figure out how it works... ?

As for the original poster: welcome to the forums; I've just put this together and I believe it's what you're looking for.

&lt;script type="text/javascript"&gt;
 //&lt;![CDATA[
 String.prototype.trim = function()
 {
 return this.replace(/s/g, '');
 }
 
 <i>	</i>String.prototype.setColor = function(color)
 <i>	</i>{
 <i>	</i>	var h =
 <i>	</i>	[
 <i>	</i>		'0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
 <i>	</i>		'a', 'b', 'c', 'd', 'e', 'f'
 <i>	</i>	], i = 0, out = '';
 
 <i>	</i>	while(i++ &lt; 6) out += h[Math.floor(Math.random()*h.length)];
 
 <i>	</i>	return '&lt;span style="color: ' + (color.trim().toLowerCase() == 'random' ? out : color) + ';"&gt;' + this + '&lt;/span&gt;';
 <i>	</i>}
 
 <i>	</i>var foo = 'Hello, World!&lt;br /&gt;', d = document;
 
 <i>	</i>d.write(foo.setColor('#900'));
 <i>	</i>d.write(foo.setColor('#090'));
 <i>	</i>d.write(foo.setColor('#009'));
 <i>	</i>d.write(foo.setColor('random'));
 <i>	</i>d.write(foo.setColor('random'));
 <i>	</i>d.write(foo.setColor('random'));
 //]]&gt;
 &lt;/script&gt;

[/B][/QUOTE]
Not to butt in or anything, but I'm still a'learnin' and my book isn't here, so could you be so kind as to explain how this works? ?

@fredmvFeb 11.2004 — #[i]Originally posted by briank[/i]

[B]Cheers guys - much appreciated ..[/B][/QUOTE]No problem whatsoever. ?[i]Originally posted by Paul Jr[/i]

[B]so could you be so kind as to explain how this works?[/B][/QUOTE]Absolutely; here it goes...

&lt;script type="text/javascript"&gt;
 //&lt;![CDATA[
 [color=green]// These are called object prototypes. You don't see them often used because not many people know about them
 // or how to use them. It is best compared to inheritance in other object-oriented languages like Java or C++.
 // It allows me to add methods onto already existing objects or objects I've created myself. The String class
 // is an intrinsic object in JavaScript and represents all String objects created. Therefore, by prototyping
 // this method onto this object, all String objects inherit this method.[/color]
 String.prototype.trim = function()
 {
 [color=green]// This is extremely simple. We are simply returning the string without
 // any whitespace whatsoever; that's what the s regular expression does for us:
 // it matches any whitspace character. Thus, along with the String.replace method,
 // we simply filter out all white space characters.[/color]
 return this.replace(/s/g, '');
 }
 
 <i>	</i>[color=green]// Same as above; an object prototype, but this time with an argument: the color you'd like.[/color]
 <i>	</i>String.prototype.setColor = function(color)
 <i>	</i>{
 <i>	</i>	[color=green]// This variable contains an array every possible color allowed in a hex triplet color.[/color]
 <i>	</i>	var h =
 <i>	</i>	[
 <i>	</i>		'0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
 <i>	</i>		'a', 'b', 'c', 'd', 'e', 'f'
 <i>	</i>	],
 
 <i>	</i>	[color=green]// The counter for dynamic variable generation.[/color]
 <i>	</i>	i = 0,
 
 <i>	</i>	[color=green]// Null string reserved for output.[/color]
 <i>	</i>	out = '';
 
 <i>	</i>	[color=green]// While the counter is less than six (6), feed another random element from the array
 <i>	</i>	// into the output variable. When this is done, we'll have a variable with six (6) characters
 <i>	</i>	// in this therefore creating a hex triplet (e.g., #abc123, #def456, etc.).[/color]
 <i>	</i>	while(i++ &lt; 6) out += h[Math.floor(Math.random()*h.length)];
 
 <i>	</i>	[color=green]// This returns a string with a simple &lt;span&gt; element styled to our likings.[/color]
 <i>	</i>	return '&lt;span style="color: ' +
 
 <i>	</i>	[color=green]// Remember this method? We're going to use our very own String.trim method to get rid of all whitespace
 <i>	</i>	// so if the user types "random" but with an extra space or something, it'll still be recognized; we're
 <i>	</i>	// also converting it to lowercase in the event that the user types "Random" or "RANDOM", etc.[/color]
 <i>	</i>	(color.trim().toLowerCase() ==
 
 <i>	</i>	[color=green]// If the string converted to lowercase and trimmed of all whitespace is equal to random, use the output
 <i>	</i>	// variable we've created which has a random hex triplet; else, use the color specified as the argument for this method.[/color]
 <i>	</i>	'random' ? out : color) + ';"&gt;' + this + '&lt;/span&gt;';
 <i>	</i>}
 
 <i>	</i>[color=green]// Define two varaibles: foo is merely a String object we can test out method out on; d is simply a shortcut for the document object.[/color]
 <i>	</i>var foo = 'Hello, World!&lt;br /&gt;', d = document;
 
 <i>	</i>[color=green]// Test the method out to see that it works.[/color]
 <i>	</i>d.write(foo.setColor('#900'));
 <i>	</i>d.write(foo.setColor('#090'));
 <i>	</i>d.write(foo.setColor('#009'));
 <i>	</i>d.write(foo.setColor('random'));
 <i>	</i>d.write(foo.setColor('random'));
 <i>	</i>d.write(foo.setColor('random'));
 //]]&gt;
 &lt;/script&gt;

@Paul_JrFeb 11.2004 — #Ah! Many, many thanks! ?

Still kinda lost with the whole prototypes thing, but I'll google it and see what I can find.

Thanks again. ?

Also in #JavaScript _↴

Fundamental Problem Validate credit card number using JavaScript.Date script not returning the correct values

Success!

Help @briank spread the word by sharing this article on Twitter...

Tweet This

Displaying Random Font Colours

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Displaying Random Font Colours

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴