Javascript typewriter

How To Make A Typewriter Effect In Javascript Using setTimeout

Javascript typewriter effect



In This Javascript Tutorial we will see How To Create A Typewriter To Display Text Letter By Letter Using setTimeout In JS In Netbeans Editor .




Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>JS: Show Text Letter By Letter</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        
        <h1 id="hid"></h1>

        <script>
            
            var i = 1;
            function func()
            {
                var message = "This Is A Text Message Test";
                if( i <= message.length )
                {
                    
                    var txt = message.substring(0,i);
                    document.getElementById("hid").innerHTML = txt;
                    
                    if(i%2 === 0)
                    {
                        document.getElementById("hid").style.color = "BLUE";
                    }else{
                        document.getElementById("hid").style.color = "RED";
                    }
                    
                    setTimeout("func()",200);
                    i++;
                }
                
                else{
                    
                    i = 1;
                    document.getElementById("hid").innerHTML = "";
                    setTimeout("func()",1000);
                }
            }
            
            func();

        </script>
        
    </body>
</html>




Share this

Related Posts

Previous
Next Post »