Do działania prezentowanego kodu potrzebny jest skrypt ‘time.js’, który możesz zaleźć tutaj.

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);		
            

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *