Nice Question, Following code is working javascript code for countdown timer. In this we enter the minute and second in the text field and click on start button. Countdown timer will be displayed under the div tag having it´s id "hi" . and you can change it as per your wish. Whatever style you want to apply on countdown timer define it for id="hi".
************************* Example of Countdown timer by Javascript *************************
countdown-timer.html :
------------------------------
<html>
<head>
<script>
var mins
var secs;
function cd() {
var min=document.getElementById("min").value;
var sec= document.getElementById("sec").value;
sec++;
mins = 1 * m(min); // change minutes here
secs = 0 + s(":"+sec); // change seconds here (always add an additional second to your total)
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.getElementById("hi").innerHTML = dis(mins,secs);// setup additional displays here.
if((mins == 0) && (secs == 0)) {
alert("Time is over");
}
else {
cd = setTimeout("redo()",1000);
}
}
function init() {
cd();
}
</script>
</head>
<body>
<div id="hi" style="color:red;font-size:24px;"></div>
Minute : <input type="text" name="min" id="min"/><br/>
Second : <input type="text" name="sec" id="sec"/><br/>
<input type="button" value="start" onclick="init()" />
</body>
</html>
******************************* Output of the above html code ******************************
Minute :
Second :
