Random Text colr Change

**skripter** · 06-04-2007, 05:17 PM

In a response to a person who once asked if it was possible to create a script that randomly changes the text color without the need of using arrays, here is one of many possible scripts that will accomplish that.

It is a very basic script that uses 2 functions with simplicity being its main feature. I am sure there could be better scripts out there but I doubt it. Just kidding!
Warning---the oddest colors may appear at times.

Here is the script:

<HTML>
<HEAD>

<TITLE>Changing Color TextText</TITLE>
</HEAD>
<BODY>

<div id="sample" style="width:100%;color:"><B>Changing Color</B></div>

<script language="JavaScript1.2">
f=0
function mixNumber()
{
now = new Date();
seed = now.getSeconds();

var i=Math.floor(Math.random(seed)*256)
var t=Math.floor(Math.random(seed)*256)
var k=Math.floor(Math.random(seed)*256)
while(Math.floor(Math.random(seed)*256==0))
{
Math.floor(Math.random(seed)*256)
}

hex1=k
hex2=i
hex3=t
fadetext();
}
function fadetext(){

if(hex1>0)
{
changeSpeed=1500//Vary speed of color change;1000=1 second
sizeOfFont=40//Change font size
document.getElementById("sample").style.color="rgb("+hex1+","+hex2+","+hex3+")";
document.getElementById("sample").style.fontSize=sizeOfFont
setTimeout("mixNumber()",changeSpeed);
}
else
{
mixNumber()
}
}

mixNumber();

</script>

</BODY>
</HTML>

**Trinithis** · 06-04-2007, 05:31 PM

No offense, but some of that code is just junk. Also, don't write in huge letters.

Code:

f=0

Why? you never use f in your code.

Math.random() does not take arguments. The whole "seed" thing is odd.

Code:

while(Math.floor(Math.random(seed)*256==0))
{
Math.floor(Math.random(seed)*256)
}

What's the point of this loop. It just stalls the computer.

Code:

hex1=k
hex2=i
hex3=t

Why not skip the "k, i, t" in the first place? Plus, hexidecimal is different from RGB 255.

**skripter** · 06-04-2007, 05:42 PM

One of the odd benefits of writing junk scripts(not intentionally) is getting valuable feedback from the pros, that adds to the learning curve.

Thanks for the pointers.

Sorry about the big fonts.

**Twey** · 06-04-2007, 05:51 PM

Code:

while(Math.floor(Math.random(seed)*256==0))

As Trinithis said, Math.random() does not take arguments: the seed parameter is doing precisely nothing. There's nothing wrong with the random number being zero, although it will very rarely occur.

Code:

setTimeout("mixNumber()",changeSpeed);

Pass functions not strings to setTimeout().

Code:

Array.prototype.map = function(f) {
  for(var i = 0, r = []; i < this.length; ++i)
    r.push(f(this[i]));
  return r;
};

function randomColour() {
  return "#" + [0,0,0].map(function() { return Math.floor((Math.random() * 256)).toString(16); }).join("");
}

**skripter** · 06-04-2007, 06:02 PM

Thank you for your feedback. As I have said earlier, I can always benefit learning from the pros and their suggestions.

Taking the time to answer with valuable feedback is appreciated.

**mburt** · 06-04-2007, 06:11 PM

Twey: where did the f function f(); come from? Does that return a random number?

**skripter** · 06-04-2007, 06:16 PM

Array.prototype.map = function(f) {

Question 1: What kind of an array is this? I haven't encountered Arry.protoype.map before.
function randomColour() {
return "#" + [0,0,0].map(function() { return Math.floor((Math.random() * 256)).toString(16); }).join("");
}
Question 2: What does this last code line do? Especially what does the # signify and why did you assign 16 toString(16)?

Thanks again.

**Twey** · 06-04-2007, 06:24 PM

Twey: where did the f function f(); come from? Does that return a random number?

f is the function passed to Array.prototype.map() as an argument. The code is actually shorter if we simply repeat Math.floor(Math.random() * 256).toString(16), but I rejected that idea on the DRY principle.

Question 1: What kind of an array is this? I haven't encountered Arry.protoype.map before.

Of course you haven't. I just wrote it. Simplified, the prototype property of constructor functions allows one to modify all instances of that object. By adding the function map() to Array.prototype, I add it to every array.

Question 2: What does this last code line do? Especially what does the # signify and why did you assign 16 toString(16)?

The hash/pound/sharp/octothorp/<insert name of choice here> character ('#') is required before HTML-style RRGGBB colour codes. The parameter passed to Number.prototype.toString() specifies the base in which to output the number. In this case, we want it in hexadecimal, base 16.

**skripter** · 06-04-2007, 06:40 PM

I am impressed with your and the other moderators scripting skills. Thank you for the reply.

Do you have any suggestions for any good tutorials on JavaScript and dynamic scripting? Especially those that cover things like you have posted in your reply and literal arrays.

Thanks much.

**Trinithis** · 06-04-2007, 06:47 PM

My biggest recommendation is to rent a book from the library. Look for keywords like DHTML, Dynamic, and JavaScript. Perhaps AJAX or ECMA as well. Or you could browse the library's computer book section. Note JavaScript is not Java. Oh, and one more note: Don't be daunted by book sizes if they are large. Some are, some aren't, but in truth, they don't take too long to go through. If you are confused about a subject, you could always make a test.html or whatever too.

For a quick overview of JavaScript basics, try
http://www.w3schools.com/js/default.asp

When looking up specific stuff for JS, try googling "mdc ****" where **** is what you want, such as String or Math. MDC is a good site for that stuff.

Thread: Random Text colr Change

Thread Tools

Search Thread

Random Text colr Change

Bookmarks

Bookmarks

Posting Permissions