Countdown Timer class
HTML
<article>
<input id="timerDuration" type="text" placeholder="HH:MM:SS:mmm"
title="Enter seconds and milliseconds (HH:MM:SS:mmm) e.g. 15:123 for 15,123mS; hours and minutes are optional" />
<button onclick="doStart()">Start</button>
<button onclick="doCancel()">Cancel</button>
<span id="timerRunning" class="hide">...running...</span>
<span id="timerFinished" class="hide">FINISHED!</span><br /><br />
<output id="timerDisplay" for="duration"></output>
</article>
CSS
.hide { display:none; }
JavaScript
//Code is in three blocks. Some page-specific code, some utilities, a Class...
//(1) The page-specific code...
var timerDisplay, timerDuration, timerRunning, timerFinished, aTimer, zero = 0;
function timerComplete() {
timerDisplay.value = zero.toMillisecondString();
$(timerRunning).hide();
$(timerFinished).show();
}
function timerUpdate(remaining) {
timerDisplay.value = remaining.toMillisecondString();
}
function doStart() {
var duration = timerDuration.value.toMilliseconds();
aTimer = new ATimer(duration, 100, timerComplete, timerUpdate);
aTimer.start();
timerDisplay.value = duration.toMillisecondString();
$(timerFinished).hide();
$(timerRunning).show();
}
function doCancel() {
aTimer.cancel();
timerDisplay.value = zero.toMillisecondString();
$(timerFinished).hide();
$(timerRunning).hide();
}
$(document).ready(function () {
timerDisplay = document.getElementById("timerDisplay");
timerDuration = document.getElementById("timerDuration");
timerRunning = document.getElementById("timerRunning");
timerFinished = document.getElementById("timerFinished");
});
//(2) UTILITIES...
Number.prototype.toMillisecondString = function () {
var partMultipliers = [{d:3600000,p:100}, {d:60000,p:100}, {d:1000,p:100}, {d:1,p:1000}];
var remainder = parseInt(this);
return partMultipliers.reduce(function (prev, m, idx) {
var quotient = Math.floor(remainder / m.d); //m.d is divisor
remainder -= (quotient * m.d);
return prev + ((idx == 0) ? "" : ":") + (quotient + m.p).toString().substr(1); //m.p is a framer
}, "");
}
String.prototype.toMilliseconds = function () {
var partMultipliers = [1, 1000, 60000, 3600000];
var parts = this.split(":").reverse();
return milliseconds = parts.reduce(function (prev, part, idx) {
var res = (parseInt(part) * partMultipliers[idx]);
return prev + res;
}, 0);
}
//(3) My "ATimer" Class...
function...