Samuele E. Locatelli
122 lines
3.8 KiB
Plaintext
122 lines
3.8 KiB
Plaintext
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="mod_cronometro.ascx.cs" Inherits="ScheMe.WebUserControls.mod_cronometro" %>
|
|
|
|
<script type="text/javascript">
|
|
(function () {
|
|
/*HTML5 Stop Watch by Braden Best aka B1KMusic*/
|
|
/*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 StopWatch() {
|
|
var started = false,
|
|
time = [[0], [0, 0], [0, 0], [0, 0]];
|
|
this.run = function () {
|
|
var output,
|
|
h = time[0],
|
|
m = time[1],
|
|
s = time[2],
|
|
ms = time[3];
|
|
if (started) {
|
|
ms[1]++;
|
|
if (ms[1] > 9) { ms[1] = 0; ms[0]++; }
|
|
if (ms[0] > 9) { ms[0] = 0; s[1]++; }
|
|
if (s[1] > 9) { s[1] = 0; s[0]++; }
|
|
if (s[0] > 5) { s[0] = 0; m[1]++; }
|
|
if (m[1] > 9) { m[1] = 0; m[0]++; }
|
|
if (m[0] > 5) { m[0] = 0; h[0]++; }
|
|
if (h[0] > 23) { ms = [0, 0]; s = [0, 0]; m = [0, 0]; h[0] = 0; }
|
|
}
|
|
ctx.font = 'bold 36px monospace';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
ctx.fillStyle = '#000';
|
|
output = h[0] + ':' + m[0] + m[1] + ':' + s[0] + s[1] + '.' + ms[0] + ms[1];
|
|
ctx.fillText(output, W / 2, 20);
|
|
};
|
|
this.start = function () {
|
|
started = true;
|
|
};
|
|
this.stop = function () {
|
|
started = false;
|
|
};
|
|
this.reset = function () {
|
|
remove(this);
|
|
new StopWatch();
|
|
}
|
|
add(this);
|
|
};
|
|
function Button(x, y, t) {
|
|
var x = x, y = y, w = 60, h = 30, t = t;
|
|
this.run = function () {
|
|
ctx.font = 'bold 16px monospace';
|
|
ctx.textBaseline = 'middle';
|
|
ctx.textAlign = 'center';
|
|
ctx.beginPath();//begin mouse detection
|
|
ctx.rect(x, y, w, h);
|
|
if (ctx.isPointInPath(mouse.x, mouse.y)) {
|
|
ctx.fillStyle = '#eee';
|
|
if (mouse.down) {
|
|
for (var i in mem) {
|
|
if (mem[i].constructor.name == 'StopWatch') {
|
|
if (t == 'START') mem[i].start();
|
|
if (t == 'STOP') mem[i].stop();
|
|
if (t == 'RESET') mem[i].reset();
|
|
//if (t == 'CLOSE') document.body.removeChild(cvs);
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
ctx.fillStyle = '#fff';
|
|
}
|
|
ctx.closePath();//end mouse detection
|
|
ctx.fillRect(x, y, w, h);
|
|
ctx.fillStyle = '#000';
|
|
ctx.fillText(t, x + w / 2, y + h / 2);
|
|
};
|
|
add(this);
|
|
};
|
|
(function init() {
|
|
new StopWatch();
|
|
new Button(0, 50, 'START');
|
|
new Button(60, 50, 'STOP');
|
|
new Button(120, 50, 'RESET');
|
|
//new Button(180, 50, 'CLOSE');
|
|
})();
|
|
(function loop() {
|
|
var a
|
|
ctx.clearRect(0, 0, W, H);
|
|
for (a in mem) if (mem.hasOwnProperty(a)) mem[a].run();
|
|
setTimeout(loop, 1000 / 100);
|
|
})();
|
|
cvs.onmousemove = function (e) {
|
|
mouse.x = (e.pageX || e.clientX || e.offsetX) - cvs.offsetLeft;
|
|
mouse.y = (e.pageY || e.clientY || e.offsetY) - cvs.offsetTop;
|
|
return false;
|
|
};
|
|
cvs.onmousedown = cvs.onmouseup = function (e) {
|
|
mouse.down = e.type == 'mousedown';
|
|
return false;
|
|
};
|
|
})();
|
|
</script> |