Countdown (JavaScript)

This script counts down from a specified number of minutes.

<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
// how many minutes
var mins = 30;

// how many seconds (don't change this)
var secs = mins * 60;
function countdown() {
	setTimeout('Decrement()',1000);
}
function Decrement() {
	if (document.getElementById) {
		minutes = document.getElementById("minutes");
		seconds = document.getElementById("seconds");
		// if less than a minute remaining
		if (seconds < 59) {
			seconds.value = secs;
		} else {
			minutes.value = getminutes();
			seconds.value = getseconds();
		}
		secs--;
		setTimeout('Decrement()',1000);
	}
}
function getminutes() {
	// minutes is seconds divided by 60, rounded down
	mins = Math.floor(secs / 60);
	return mins;
}
function getseconds() {
	// take mins remaining (as seconds) away from total seconds remaining
	return secs-Math.round(mins *60);
}
</script>
</head>
<body onload="countdown();">
	Countdown: <input id="minutes" type="text" style="width: 22px;"> minutes <input id="seconds" type="text" style="width: 22px"> seconds remaining.
</body>
</html>

Comments

Anonymous said…
Thanks a lot for this neat, simple countdown script!
12:46 am, May 24, 2005
Ovidiu U said…
thank you, just what I was looking for.
10:45 am, September 06, 2007
Mohammad Hassan said…
how i can stop at 00:00

right now it is going -1:59
6:50 am, August 22, 2008
Sam said…
Not tested, but try changing these lines:

secs--;
setTimeout('Decrement()',1000);


To

secs--;
if(secs > 0)
{
setTimeout('Decrement()',1000);
}

Sorry for late response.
7:59 am, August 29, 2008
Post a Comment

Popular posts from this blog

Text Clips for Programmers Notepad 2 (XHTML)

Update (23 June, 2005) : Added DOCTYPEs. More Programmers Notepad 2 text clips. Some tags are not included (b, big, i, small, sub, sup) as these can be replaced with existing tags (em, strong), or styled using CSS. Create a file in the clips sub directory of the Programmers Notepad directory, with the extension .clips (i.e. xhtmltags.clips) and paste in the following code: <?xml version="1.0"?> <clips name="XHTML Tags"> <clip name="------ DOCTYPEs ------"></clip> <clip name="XHTML 1.0 transitional"><![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">|]]></clip> <clip name="XHTML 1.0 strict"><![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">|]]></clip> <clip name="XHTML 1.1...
Read more

Shrink Image (JavaScript)

This function shrinks an image, so its dimensions are no bigger than the maximum dimensions you define. // get new dimensions so it fits within the maximum // o = original dimensions / image, m = maximum dimensions function shrink(o, m) { // r = resized var r = {width: o.width, height: o.height}; // if an image, rather than an object, resize it if(o.nodeName && o.nodeName.toLowerCase() == "img") r = o; if(r.width > m.width) { r.height = r.height * (m.width / r.width); r.width = m.width; if(r.height > m.height) { r.width = r.width * (m.height / r.height); r.height = m.height; } } else if(r.height > m.height) { r.width = r.width * (m.height / r.height); r.height = m.height; } return r; } To use, simply supply the image and the dimensions to constrain it to: var image = document.getElementById("image"); var max = {width: 1024, ...
Read more

Select box manipulation with jQuery

If you read the jQuery mailing list , you may be aware that I have updated my plugins for working with select boxes . Summary of changes: addOption replaces any options with the same value (so think of it as an add/replace options plugin selectOptions selected options in addition to what was already selected, but there is now an option for it not to do this There are two new methods: copyOptions which is for copying options between select boxes ajaxAddOption allows you to add options via AJAX (i.e. could be used for create options dynamically from a server script)
Read more