This is the web log of Tim Bennett, web designer. He also runs Texelate, offering the best web design Leeds, Yorkshire has to offer

Flashing text with JavaScript

Sunday, October 1st, 2006 at 9:00 am

This tutorial will show you how to use JavaScript to create some flashing text using random colours like this or a set of specified colours like this.

To create this effect you need to use JavaScript to dynamically change the text colour of some HTML many times a second using JavaScript’s setInterval() function. This function let’s you specify how many times per second a function is called – the examples here will call a function named flashtext() 20 times per second. The parameter 50 is passed to setInterval() as this function requires the interval is set in milliseconds.

Before exploring the flashtext() function further here is the inital CSS for the text:

CSS Code

            body {

            

                background-color: #222222;

            

            }

        

            div {

            

                font-family: Trebuchet MS, sans-serif;

                font-size: 24px;

                color: #EEEEEE;

            

            }

Now we define the flashtext() function for random colours; every time a colour change is requested a hex colour is randomly created by selecting an element from an array that contains the letters A to F and the numbers 0 – 9 (the building blocks of hex colours). The actual colour is changed by directly accessing the color attribute of the style property using document.getElementById().

Random Colours

        <script language=”javascript” type=”text/javascript”>

        

            var hexvalues = Array( “A”, “B”, “C”, “D”, “E”, “F”, “0″, “1″, “2″, “3″, “4″, “5″, “6″, “7″, “8″, “9″ );

            

            function flashtext() {

            

                var colour = ‘#’;

            

                for( var counter = 1; counter <= 6; counter ++ ) {

                

                    var hexvalue = hexvalues[ Math.floor( hexvalues.length * Math.random() ) ];

                

                    colour = colour + hexvalue;

                

                }

                

                document.getElementById( ‘flashingtext’ ).style.color = colour;

            

            } 

            

            setInterval( ‘flashtext()’, 50 );

        

        </script>

The specified colour change works in the same way only this time an array is used with specific hex colour values:

Specific Colours Code

        <script language=”javascript” type=”text/javascript”>

        

            var textcolours = Array( ‘#FFFFFF’, ‘#EEEEEE’, ‘#DDDDDD’, ‘#CCCCCC’, ‘#BBBBBB’, ‘#AAAAAA’ );

            

            function flashtext() {

            

                var colour = Math.round( textcolours.length * Math.random() );

                document.getElementById( ‘flashingtext’ ).style.color = textcolours[ colour ];

            

            } 

            

            setInterval( ‘flashtext()’, 50 );

        

        </script>

Here’s a working example using random colours:

Complete Code 1

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

    <head>

        <title>Flashing Text</title>

        <style media=”all” type=”text/css”>

        

            body {

            

                background-color: #222222;

            

            }

        

            div {

            

                font-family: Trebuchet MS, sans-serif;

                font-size: 24px;

                color: #EEEEEE;

            

            }

        

        </style>

        <script language=”javascript” type=”text/javascript”>

        

            var hexvalues = Array( “A”, “B”, “C”, “D”, “E”, “F”, “0″, “1″, “2″, “3″, “4″, “5″, “6″, “7″, “8″, “9″ );

            

            function flashtext() {

            

                var colour = ‘#’;

            

                for( var counter = 1; counter <= 6; counter ++ ) {

                

                    var hexvalue = hexvalues[ Math.floor( hexvalues.length * Math.random() ) ];

                

                    colour = colour + hexvalue;

                

                }

                

                document.getElementById( ‘flashingtext’ ).style.color = colour;

            

            } 

            

            setInterval( ‘flashtext()’, 50 );

        

        </script>

    </head>

    <body>

        <div id=”flashingtext”>JavaScript Flashing Text</div>

    </body>

</html>

Here’s a working example using specified colours:

Complete Code 2

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

    <head>

        <title>Flashing Text</title>

        <style media=”all” type=”text/css”>

        

            body {

            

                background-color: #222222;

            

            }

        

            div {

            

                font-family: Trebuchet MS, sans-serif;

                font-size: 24px;

                color: #EEEEEE;

            

            }

        

        </style>

        <script language=”javascript” type=”text/javascript”>

        

            var textcolours = Array( ‘#FFFFFF’, ‘#EEEEEE’, ‘#DDDDDD’, ‘#CCCCCC’, ‘#BBBBBB’, ‘#AAAAAA’ );

            

            function flashtext() {

            

                var colour = Math.round( textcolours.length * Math.random() );

                document.getElementById( ‘flashingtext’ ).style.color = textcolours[ colour ];

            

            } 

            

            setInterval( ‘flashtext()’, 50 );

        

        </script>

    </head>

    <body>

        <div id=”flashingtext”>JavaScript Flashing Text</div>

    </body>

</html>

Leave a Reply

You must be logged in to post a comment. If you don't have an account register one now.

Do you need a website or web-related service?
I run an award-winning web design studio.