HTML5 Stop Watch
I made a stopwatch :D
by phayes0289
HTML
<!--No HTML-->
CSS
/*No CSS*/
JavaScript
/* HTML5 Stopwatch by Braden Best (aka B1KMusic)
*
* Version 2.0.0
* Changelog:
* 2.0.0 - 2018-11-10 overhaul phase 1
* ~ cleaned up StopWatch and Button implementations
* 1.0.0 - 2013-2014 initial
* + created script
* Planned:
* + more cleanup. A LOT more cleanup.
* + get rid of add(), use an array called runnables[] or something
* + move text drawing crap to its own generic function taking text and array
* [["prop", "value"], ...] -> ctx[field[0]] = field[1]
* ctx.fillText(text, geom)
* + fix mouse/event handling
*/
(function(){
/*You can use this script anywhere and it will work*/
var cvs,ctx,W,H,mem,StopWatch,Button,mouse;
mem = {};
mouse = {x:-10,y:-10,down:false};
cvs = document.createElement('canvas');
cvs.width = W = 240;
cvs.height = H = 80;
(function appendCanvas(){
if(document.body)document.body.appendChild(cvs);
else setTimeout(appendCanvas,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 pad0(n, width){
let out = n.toString();
while(out.length < width)
out = "0" + out;
return out;
}
function format(fmt, ...args){
args.forEach(function(arg){
fmt = fmt.replace("{arg}", arg);
});
return fmt;
}
function StopWatch(){
const INTERVAL = 5;
let running = false;
let curtime = 0;
function run(){
if(running)
curtime += INTERVAL;
draw_text(display_time(curtime));
}
function draw_text(text){
ctx.font = "bold 36px...