JavaScript code that displays text “TEXT-GROWING” with increasing font size in the interval of 100ms in RED COLOR

Aim:

Write a JavaScript code that displays text “TEXT-GROWING” with increasing font size in the interval of 100ms in RED COLOR, when the font size reaches 50pt it displays “TEXT-SHRINKING” in BLUE color. Then the font size decreases to 5pt.

Explanation:

This program brings out the event handling capabilities of Java script. Timer event handling using Java script is explained in this program. Further, the use of style attributes in HTML and Java script is demonstrated. This program also brings out usefulness of Java script in handling dynamic positioning of elements in HTML page. These give the life to a web page and make it engaging

Code:

Html

<html>
<script type=text/javascript src=3.js>
</script>
<body onload=fnts()>
<p id="p1" style="font-size:12pt;color=black"> TEXT-GROWING </p>
</body>
</html>

JavaScript

var grow=true; function fnts()
{
fntsize=document.getElementById("p1").style.fontSize; document.getElementById("p1").style.color="red";

ifntsize=parseInt(fntsize); window.setTimeout(fntGS,100,ifntsize);

}

function fntGS(ifs)
{
if(grow)
{
ifs=ifs+1; if(ifs<=50)
{
document.getElementById("p1").style.fontSize=ifs+"pt";

}
else
{
grow=false;
document.getElementById("p1").style.color="blue"; document.getElementById("p1").innerHTML="TEXT-SHRINKING";
}

}
else
{
ifs=ifs-1; if(ifs<5)
return; document.getElementById("p1").style.fontSize=ifs+"pt";

}
window.setTimeout(fntGS,100,ifs);
}

Javascript functions used:

window.setTimeout() – The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds. Tip: 1000 ms = 1 second. The function is only executed once.

Enhancement:

The position of text can also be moved along with its font size

Enhanced Html

<html>
<script type=text/javascript src=3e.js>
</script>
<body onload=fnts()>
<p id="p1" style="font-size:12pt;color=black;position:absolute;top:10px;left:10px"> TEXT- GROWING </p>
</body>
</html>

Enhanced JavaScript

var grow=true; function fnts()
{
fntsize=document.getElementById("p1").style.fontSize; document.getElementById("p1").style.color="red"; x=document.getElementById("p1").style.left; x=parseInt(x); y=document.getElementById("p1").style.top;
y=parseInt(y);

ifntsize=parseInt(fntsize); window.setTimeout(fntGS,100,ifntsize,x,y);
}

function fntGS(ifs)
{
if(grow)
{
ifs=ifs+1; x=x+1; y=y+1; if(ifs<=50)
{
document.getElementById("p1").style.fontSize=ifs+"pt"; document.getElementById("p1").style.top=y+"px"; document.getElementById("p1").style.left=y+"px";

}
else
{
grow=false;
document.getElementById("p1").style.color="blue"; document.getElementById("p1").innerHTML="TEXT-SHRINKING";

}

}
else
{
ifs=ifs-1; x=x+1; y=y+1;

if(ifs<5) return;
document.getElementById("p1").style.fontSize=ifs+"pt"; document.getElementById("p1").style.top=y+"px"; document.getElementById("p1").style.left=y+"px";

}
window.setTimeout(fntGS,100,ifs,x,y);
}

Leave a Comment