Flashing text with JavaScript



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 tosetInterval() 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 usingdocument.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>

Posted in

0 Response to Flashing text with JavaScript

Post a Comment

Subscribe to: Post Comments (Atom)