PDA

View Full Version : 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>
<!-- Minus AutoDato -->
<TITLE>Changing Color TextText</TITLE>
</HEAD>
<BODY>

<div id="sample" style="width:100&#37;;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.


f=0

Why? you never use f in your code.

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


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.


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
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.
setTimeout("mixNumber()",changeSpeed); Pass functions not strings to setTimeout().
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.

skripter
06-04-2007, 06:53 PM
Thank you.

I have used W3schools tutorials often and find it to be a great site to learn.

MDC seems to be a new one to me. I will check it out.

I am wondering why you referred the library as a source. Aren't the online tutorials good enough?

thanks much.

Trinithis
06-04-2007, 06:57 PM
I tend to like books more when learning something new. Of course, I still like using online tutorials, but books tend to give better explanations and more demos.

Twey
06-04-2007, 08:20 PM
Whereas I don't: books tend to be out-of-date and quite often contain bad or simply incorrect information, and hey, the search function sucks :p Books can be a good reference, but in general I wouldn't use them if I didn't have enough knowledge to tell good code from bad. The same applies to w3schools, which has quite a reputation for providing inaccurate information.

skripter
06-04-2007, 11:35 PM
Then which good online tutorial(s) would you recommend for learning Javascript ? If some are good while others aren't how would one know which one to choose?

As far as books are concerned which would be a good book?

How did you learn your JavaScript and what sources did you use?

I am impressed with the scripting abilities you all possess.

Thanks.

Trinithis
06-04-2007, 11:54 PM
I am completely self-taught. (I wanted to take a JS class over this summer too at my school, but sadly, it doesn't offer it. Probably because of a lack of standards.) I got into programming through a friend's books. I remember the days of learning HTML, and that was programming... Well, once I got comfortable with that, I picked up my friend's "Javascript in Easy Steps" book and went from there. I couldn't tell you where I learned all my material, as it is mostly from hodge-podge websites and all, but most of it simply comes from practice. As for my current scripting skills, I guess I'm intermediate, but all you require is a will to do something and you will get it done. Eventually, what code you have seen in this thread will not seem all too "impressive", especially once you delve more into OO concepts and understand them. To me, programming is like a (fun) puzzle, and hell, you even get frustrated, but that makes you only more determined to figure something out.

Have fun learning, and h4x the web!!!

Oh, and the best source is none other than http://www.google.com/intl/xx-hacker/ (which is >>> google for obvious reasons)

Twey
06-05-2007, 12:01 AM
The tutorials on http://www.howtocreate.co.uk/ are rather good.
If some are good while others aren't how would one know which one to choose?The only way is to ask someone who knows the language well enough to tell the difference.

alexjewell
06-05-2007, 12:39 AM
Well, actually, my best resource is this forum.

And, kind of along the same lines, looking at other peoples' code. To me, seeing real examples, rather than the apple, banana, pear and hello world sort of examples, helps me learn.

skripter
06-06-2007, 06:32 PM
Thank you for all the helpful replies.

I was also thinking along the lines of perhaps getting a JavaScript reference manual online, or the library, if one is avialable.

It has been suggested to me that with such a reference manual one can learn alot more than any other venues.

default
04-21-2019, 01:36 PM
For a quick overview of JavaScript basics, try
http://welookups.com/js/default.html

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.[/QUOTE]

jason23160
05-06-2019, 06:52 AM
//setTimeout("mixNumber()",changeSpeed); using setTimeout you can change the time span in which the color of the text will change.