60 and 15 minute countdown timers

**GUIDesigner** · 09-14-2010, 11:54 PM

I am needing complete code for a 60min and 15min countdown timer. Perferably in html/javascript (where the coding is within the html)

**jscheuer1** · 09-15-2010, 04:13 AM

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

/* Count Down Script (c)2010 John Davenport Scheuer
   as first seen in http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use
   */

function Timer(id, minLimit, callback){
	var thisTimer = this;
	this.limit = minLimit * 60;
	this.callback = callback;
	this.timer = 0;
	this.addEvent(window, 'load', function(){
		thisTimer.el = document.getElementById(id);
		thisTimer.txt = thisTimer.el.firstChild;
		thisTimer.intv = setInterval(function(){thisTimer.intvFunc();}, 1000);
	});
}

Timer.prototype = {

	intvFunc: function(){
		this.txt.nodeValue = this.formatTime(++this.timer);
		if(this.timer === this.limit){
			clearInterval(this.intv);
			this.callback.call(this);
		}
	},

	formatNum: function(n){
		return n < 10? '0' + n : n;
	},

	formatTime: function (n, m, s){
		s = n % 60;
		m = (n - s) / 60;
		return [this.formatNum(m), ':', this.formatNum(s)].join('');
	},

	addEvent: (function(){return window.addEventListener? function(el, ev, f){
			el.addEventListener(ev, f, false);
		}:window.attachEvent? function(el, ev, f){
			el.attachEvent('on' + ev, f);
		}:function(){return;};
	})()
};

// Usage: new Timer('id_of_counting_element', #_of_mins, callback_function(){});
new Timer('timer1', 60, function(){this.el.parentNode.style.color = 'red'});
new Timer('timer2', 15, function(){this.el.parentNode.style.color = 'green'});
</script>
</head>
<body>
<div>Timer One Value: <span id="timer1">00:00</span></div>
<div>Timer One Value: <span id="timer2">00:00</span></div>
</body>
</html>

Notes: For testing purposes you may want to use values like 2 and 1, or even fractions like 0.5 and 0.25 in place of the highlighted numbers in (#_of_minutes - field for number of minutes). For the callback(s), you may do whatever you like.

Any questions, feel free to ask.

**neilbo** · 11-16-2011, 07:08 AM

How do get this timer to play a sound every minute?

would i have to use 6 different timers to trigger a sound at the end or can it be done with just the one timer...

i've been searching for answers for days with no luck....

can you help me?

**Luukedu** · 01-16-2021, 11:19 PM

Thanks for posting this script it works great. My questions is: The timer is currently set to count "up" how do you modify it to actually count "down"? I want the counter to countsdown from 15 minutes to 0. Any assistance would get greatly appreciated.

Thread: 60 and 15 minute countdown timers

Thread Tools

Search Thread

60 and 15 minute countdown timers

How to make a timer that plays sound every minute

Bookmarks

Bookmarks

Posting Permissions