HTML5 canvas clock
Not one that's made out of canvas. That would definitely be rather daft. This one uses the HTML5 canvas tag.
And yes I know there already is one a few, but I got bored...
The one I've seen doesn't have numbers though - it was probably made when the was no text API on the canvas. This one, though, does. Isn't it cute?
Oh and as an after thought... you'll need to be using Firefox 3.1b2+, Chrome 2+ or Safari 4+.
The library is here. And the HTML you need is as follows.
First include the library:
<script type="text/javascript" src="Clock.js"></script>
Then define your canvas tag:
<canvas id="myClock" width="300" height="300">[No canvas support]</canvas>And finally the Javascript:
<script type="text/javascript">
clock = new Clock('myClock');
// All these default to true anyway
clock.Set('clock.digital', true);
clock.Set('clock.numbers', true);
clock.Set('clock.background', true);
DrawClock = function ()
{
clock.Draw();
// The timer which redraws the clock ten times per second,
// (doing so helps prevent slight timing oddities)
setTimeout(DrawClock, 100);
}
DrawClock();
</script>