Tuesday, December 30, 2008

How to display second’s timer in web page?

JavaScript functions could help in this task to display timer in a web page.
We should call a function at specific time intervals repeatedly which increments the counter variable and updates on a HTML label.

“setTimeout” is a javascript function which can be used to call a specific javascript function repeatedly at specific time intervals.
“clearTimeout” is a javascript function to terminate the loop of calling function.
Ex:-
<html>
<head>
<title>Timer</title>
<script language="javascript" type="text/javascript">
var tmr;
var counter=0;
function displayTimer()
{
counter=counter+1;
document.getElementById('lbltimer').innerText=counter;
tmr=setTimeout("displayTimer();",1000);
}
</script>
</head>
<body onload="displayTimer();">
<table><tr>
<td>Timer :</td>
<td>
<label id='lbltimer'></label>
</td></tr></table>
</body>
</html>

2 comments:

Prasanna said...

Hi Srinivas, very useful concepts. Really helpful. I like all your articles. Keep going!

Programming and Database Concepts said...

Thank you Prasanna...
nice hearing from you.
Cheers for following this blog and very encouraging

Srini