How To Make A Typewriter Effect In Javascript Using setTimeout
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>