Zegar cyfrowy (HTML5 canvas)

Zegar cyfrowy

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;
function Clock() {
};
Clock.prototype.drawClock = function() {
	var date = new Date();
	var hh = date.getHours();
	var mm = date.getMinutes();
	var ss = date.getSeconds();
	var mm1 = mm < 10 ? "0" + mm.toString() : +mm.toString();
	var ss1 = ss < 10 ? "0" + ss.toString() : ss.toString();
	var time = hh + ":" + mm1 + ":" + ss1;
	ctx.beginPath();
	ctx.clearRect(0, 0, width, height);
	ctx.fillStyle = "lightgray";
	ctx.rect(0, 0, width, height);
	ctx.fill();
	ctx.beginPath();
	ctx.font = "70px Arial";
	ctx.fillStyle = "green";
	ctx.fillText(time, 10, 72);
	ctx.fill();
};
var clock = new Clock();
var timer = setInterval("clock.drawClock()", 500);