Page 1 of 2 12 LastLast
Results 1 to 10 of 20

Thread: Random Text colr Change

  1. #1
    Join Date
    May 2007
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Random Text colr Change

    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>
    Last edited by tech_support; 06-10-2007 at 06:03 AM.

  2. #2
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    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.

  3. #3
    Join Date
    May 2007
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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("");
    }
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  5. #5
    Join Date
    May 2007
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

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

  7. #7
    Join Date
    May 2007
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #8
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  9. #9
    Join Date
    May 2007
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  10. #10
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    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.
    Last edited by Trinithis; 06-04-2007 at 06:53 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •