Countdown Timer – Javascript

Posted by
June 12, 2008
  

On community websites there are number of applications these days which interact with user on time basis like responding on some question with in some time limit, games etc.

Count down timer can be useful for giving information to user,how much time left for the final bell:

Change minutes seconds accordingly (use javascript variable for dynamic values).

– CSS –

#txt {
border:none;
font-family:verdana;
font-size:16pt;
font-weight:bold;
border-right-color:#FFFFFF
}

– Javascript : countDown.js , save in a file –

 
var mins
var secs;
 
function countDown() {
 	mins = 1 * minutes("10"); // change minutes here
 	secs = 0 + seconds(":01"); // change seconds here (always add an additional second to your total)
 	redo();
}
 
function minutes(obj) {
 	for(var i = 0; i < obj.length; i++) {
  		if(obj.substring(i, i + 1) == ":")
  		break;
 	}
 	return(obj.substring(0, i));
}
 
function seconds(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); // setup additional displays here.
 	if((mins == 0) && (secs == 0)) {
  		window.alert("Time is up. Press OK to continue."); // change timeout message as required
  		// window.location = "yourpage.htm" // redirects to specified page once timer ends and ok button is pressed
 	} else {
 		cd = setTimeout("redo()",1000);
 	}
}
 
function init() {
  countDown();
}
window.onload = init;
 
 

– HTML –

 
<html>
<head>
<script type="text/javascript" src="countDown.js"></script>
</head>
<body>
<form name="cd">
<input id="txt" readonly="true" type="text" value="10:00" border="0" name="disp">
</form>
</body>
</html>
 

Most Commented Posts

coding, javascript, problem, web

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments
Comment by ScriptDidntWork on September 9, 2011 @ 5:02 am

Yep. It didn’t work

Leave a comment

(required)

(required)