PDA

View Full Version : 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
<!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?