Click to see online demo

Last weekend, I was playing with Raphaël – A JavaScript Library for drawing/graphics. Its like drawing anything on a canvas, pretty easy and impressive. In that, there was a function call rotate() which can rotate any element(line, circle, rectangle, image etc.) at any angle from a given axis. This gives me an idea to have 3 lines of different color, stroke and length for second, minute and hour hand in a clock. After every second, we need to check the time with the help of javascript Date(). Then rotate the second hand line, about the center axis with [6 * number of seconds] degrees (as 1 sec is equal to 6 degrees). Rotate the minute hand line with [6 * number of minutes] degrees. Rotate the hour hand with [30 * number of hours] degrees (as 1 hour is equal to 30 degrees). Combining this logic, I built a clock (with just 30 lines of code), whose demo is given below,

For this demo, I have used images of different dials (which I have downloaded from google) as backgound. Upon which the clock is drawn through Raphaël. Luckly, for me, the center of these dials images excatly conicides with the center for clock. Another option I provided in the demo is to change the color of second, minute and hour hand of the clock according to the dial selected by the user. It can be used anywhere with any size, styling and customization. I can also help you with that.

Open the demo in new window. As this clock is based upon Raphaël (which is dependent upon CSS 3), it may not work in certain versions of different browsers. Kindly get back to in that case with browser name and version. Lastly, your feedback and suggestions are welcomed as always. Raphaël is a powerful library and you can built some really fancy stuff with it. Here is my bit, hope you guys like it.

• Previous Entry: Build Calendar with PHP
• Next Entry: jQuery Tag Cloud Plugin