Q1.How to print character by character of a string using setTimeout() and clearTimeout()?
Example:
<html>
<head>
<title>print character SetTimeout ClearTimeout</title>
<script>
var i=0;
function set_clear()
{
var str="COMPUHELP";
var x,id;
if(i>8)
{
clearTimeout(id);
}
else
{
x=document.getElementById("heading2");
x.innerHTML="<font color='red'>"+x.innerHTML+str[i]+"</font>";
i++;
id=setTimeout("set_clear()",1000);
}
}
</script>
</head>
<body>
<h2>Q.How Print every character of COMPUHELP one by one after a delay of 1 second?</h2>
<h2 id="heading2"></h2>
<input type="button" value="click" onclick="set_clear()"/>
</body>
</html>
Output:
Q2. How to change the color of the text after a certain time using setTimeout() and clearTimeout()?
Example:
<html>
<head>
<title>Color of text SetTimeout ClearTimeout</title>
<script>
var i=0;
function set_clear()
{
var id;
var colour=Array("red","green","blue","cyan","yellow");
var get_length=colour.length;
if(i>get_length)
{
clearTimeout(id);
}
else
{
x=document.getElementById("heading2");
x.style.color=colour[i];
i++;
id=setTimeout("set_clear()",1000);
}
}
</script>
</head>
<body>
<h2>Q.Change different colors (red,green,blue etc.) of the text after 1 second?</h2>
<h2 id="heading2">COMPUHELP</h2>
<input type="button" value="click" onclick="set_clear()"/>
</body>
</html>
Q3. How to change the backgroundcolor of the div after a certain time using setTimeout() and clearTimeout()?
Example:
<html>
<head>
<title>Change bgcolor of text SetTimeout ClearTimeout</title>
<script>
var i=0;
function set_clear()
{
var id;
var colour=Array("red","green","blue","cyan","yellow");
var get_length=colour.length;
if(i>get_length)
{
clearTimeout(id);
}
else
{
x=document.getElementById("mydiv");
x.style.backgroundColor=colour[i];
i++;
id=setTimeout("set_clear()",1000);
}
}
</script>
</head>
<body>
<h2>Q.Change different background colors (red,green,blue etc.) of the div after 1 second?</h2>
<div id="mydiv" style="background-color:#F00; height:200px; width:200px;"></div>
<br />
<input type="button" value="click" onclick="set_clear()"/>
</body>
</html>
Output:
Q4. How to print a message "Welcome to Compuhelp" continuously after a certain time using setTimeout() and clearTimeout()?
Example:
<html>
<head>
<title>print word by word SetTimeout ClearTimeout</title>
<script>
var i=0;
function set_clear()
{
var str=Array("Welcome"," to"," Compuhelp");
var x,id;
x=document.getElementById("heading2");
if(i>2)
{
i=0;
x.innerHTML="";
}
else
{
x.innerHTML="<font color='red'>"+x.innerHTML+str[i]+"</font>";
i++;
}
id=setTimeout("set_clear()",1000);
}
</script>
</head>
<body>
<h2>Q.How Print "welcome to Compuhelp" word by word after a delay of one second continuously?</h2>
<h2 id="heading2"></h2>
<br /><br />
<input type="button" value="click" onClick="set_clear()"/>
</body>
</html>