if you click on grow button the text will be grow and if you click on shrink button the text will be shrink
<script type="text/javascript">
begin_text_size = 0;
end_text_size = 200;
txt1 = 200;
txt2 = 0;
function grow_function() {
if (begin_text_size < end_text_size) {
msg.style.fontsize = begin_text_size;
begin_text_size++;
timer = setTimeout("grow_function()", 50);
}
}
function shrink_function() {
if (txt1 > txt2) {
msg.style.fontsize = txt1;
txt1--;
timer = setTimeout("shrink_function()", 50);
}
}
function stoptimer() {
clearTimeout(timer);
}
</script>
code in body section
<body>
<form id="form1" runat="server">
<div>
<input type="button" name="button1" value="grow" onclick="grow_function()" />
<input type="button" name="button2" value="shrink" onclick="shrink_function()" />
</div>
</form>
<p id="msg">wonderful text!</p>
</body>