HTML5 Countdown Timer
I modified the source code of my StopWatch to make a Countdown Timer
HTML
<!--
Go here:
http://jsfiddle.net/B1KMusic/9MnES/show
To be able to have the time display in the tab title and run in the background
-->
JavaScript
(function(){
/*HTML5 Countdown Timer by Braden Best aka B1KMusic*/
/*You can use this script anywhere and it will work*/
var cvs,ctx,W,H,mem,Timer,Button,mouse,input,br,div;
mem = {};
mouse = {x:-10,y:-10,down:false};
input = document.createElement('input');
var centerCalc = (240/2)-(56/2);//half canvas - half textfield
input.style.position = 'relative';input.style.left = centerCalc+'px';
input.style.width = '55px';
input.style.border = '1px solid #eee';
input.style.padding = '0px 2px';
input.style.font = '10px monospace';
input.style.textAlign = 'center';
input.placeholder = input.value = '00:00:00';
input.maxlength = '8';
cvs = document.createElement('canvas');
cvs.width = W = 240;
cvs.height = H = 80;
(function appendElements(){
if(document.body){
div = document.createElement('div');
br = document.createElement('br');
div.appendChild(cvs);
div.appendChild(br);
div.appendChild(input);
document.body.appendChild(div);
}
else setTimeout(appendElements,100);
})();
ctx = cvs.getContext('2d');
function add(o){
o.id = Math.floor(Math.random()*10000).toString(36);
for(var i in mem){
if(mem.hasOwnProperty(i) && i == o.id){
add(o);
return false;
}
}
mem[o.id] = o;
};
function remove(o){
delete mem[o.id];
};
function Timer(_time){
var started = false,
time = _time,
original_time = JSON.parse(JSON.stringify(_time)),
h,m,s,output = '00:00:00';
this.run = function(){
h = time[0];
m = time[1];
s = time[2];
if(started){
s[1]--;
if(s[1]<0){s[1]=9;s[0]--;}
if(s[0]<0){s[0]=5;m[1]--;}
if(m[1]<0){m[1]=9;m[0]--;}
...