ARTICLE
Implementation of the Countdown Timer
This article explains about the implementation of the Countdown Timer. We can use this timer for online interview and something like that.
This article explains about the
implementation of the Countdown Timer. We can use this timer for online
interview and something like that.
These are the steps...
Start visual studio and create a new web application. Open the HTML design of
your web page and add the following JavaScript functions before closing the head
tag.
<script type="text/javascript">
var mins
var secs;
function cd() {
mins = 1 * m("1");
secs = 0 + s(":01");
redo();
}
function m(obj) {
for (var
i = 0; i < obj.length; i++) {
if (obj.substring(i, i + 1) ==
":")
break;
}
return (obj.substring(0, i));
}
function s(obj) {
for (var
i = 0; i < obj.length; i++) {
if (obj.substring(i, i + 1) ==
":")
break;
}
return (obj.substring(i + 1,
obj.length));
}
function dis(mins, secs) {
var disp;
if (mins <= 9) {
disp = " 0";
} else {
disp = " ";
}
disp += mins + ":";
if (secs <= 9) {
disp += "0" + secs;
} else {
disp += secs;
}
return (disp);
}
function redo() {
secs--;
if (secs == -1) {
secs = 59;
mins--;
}
document.cd.disp.value = dis(mins, secs);
if ((mins == 0) && (secs == 0)) {
window.alert("Time is up. Press OK to
continue.");
} else {
cd = setTimeout("redo()",
1000);
}
}
function init() {
cd();
}
window.onload = init; </script>
Now add the following style
tag.
<style>
#txt
{
border: none;
font-family:
verdana;
font-size:
16pt;
font-weight:
bold;
border-right-color:
#FFFFFF;
}
</style>
Add the following HTML code to design the layout of your web page and call the
above JavaScript functions.
<body ms_positioning="GridLayout">
<form name="cd">
<center>
<div style="margin-left:
190px">
<input id="txt" readonly="true" type="text" value="10:00" border="0" name="disp"></div>
</center>
</form>
</body>
Now run your application.