Zegar odliczający czas od zdarzenia (HTML5 canvas)

Zegar odliczający czas od zdarzenia

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

var cv = document.getElementById("canvas");
var ctx = cv.getContext("2d");
var width = cv.width;
var height = cv.height;
var a = 60;
var b = 3600;
var c = 86400;
function Clock() {};
Clock.prototype.drawClock = function() {
	var zdarzenie = "Żyję";
	var time = new Date(1952,5,4,21,5,0,0);
	var now = new Date();
	var diff = now.getTime() - time.getTime();
	var secs = Math.floor(diff / 1000);
	var dni = Math.floor(secs / c);
	var r1 = secs % c;
	var godz = Math.floor(r1 / b);
	var r2 = r1 % b;
	var min = Math.floor(r2 / a);
	var sek = r2 % a;
	ctx.beginPath();
	ctx.clearRect(0, 0, width, height);
	ctx.fillStyle = "lightgray";
	ctx.rect(0, 0, width, height);
	ctx.fill();
	ctx.beginPath();
	ctx.font = "36px Arial";
	ctx.fillStyle = "green";
	ctx.fillText(zdarzenie+":", 20, 50);
	ctx.beginPath();
	ctx.font = "36px Arial";
	ctx.fillStyle = "green";
	ctx.fillText(dni, 20, 110);
	ctx.fillText(godz, 130, 110);
	ctx.fillText(min, 195,110);
	ctx.fillText(sek, 265,110);
	ctx.beginPath();
	ctx.font="12px Arial";
	ctx.fillText("dni", 25, 135);
	ctx.fillText("godz", 135, 135);
	ctx.fillText("min", 200,135);
	ctx.fillText("sek", 270,135);
	ctx.fill();
};
var clock = new Clock();
var timer = setInterval("clock.drawClock()", 500);