Well , This Post Based Upon one of JavaScript’s powerful method getElementById(). This is documents’s method which can be used to access HTML entities within JavaScript with the help of their IDs (which is unique).
For example we can access the HTML entity and its values etc. with the ID oneas:
document.getElementById("one")
The HTML object may be defined like below:
<p id="one">some text</p>
Code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CodingTalks : JavaScript Countdown Timer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
//to store timeout ID
var tID;
function tickTimer(t,id)
{
//if time is in range
if(t>=0)
{
document.getElementById(id).innerHTML=t;
t=t-1;
tID=setTimeout("tickTimer('"+t+"','"+id+"')",1000);
}
//stop the timeout event
else
{
killTimer(tID);
document.getElementById(id).innerHTML="Time Out!!";
}
}
//function to stop the timeout event
function killTimer(id)
{
clearTimeout(id);
}
</script>
<!--style the ID -->
<style>
#timer
{
background: #000;
color: #fff;
font-size: 20px;
}
</style>
</head>
<!--pass the id to timer has to attached to -->
<body onLoad="tickTimer(59,'timer')" onUnload="killTimer(tID)">
<p>Timer: <span id="timer"></span></p>
</body>
</html>
Tutorial By : Manoj Kataria
Java Developer
The post JavaScript : Countdown Timer appeared first on CodingTalks.