jqClock

jQuery analog clock widget plug-in.

jqClock is a jQuery plug-in that can add one or more analog clock widgets into a page through the JavaScript. Each clock widget could show their own time.

jQuery('#clock').clock({
    graduations: 12
});

Demo

Demo2(multiple widgets)

Options

• size Size of widget. It means that width and height will be {size} px. Default is 150.
• graduations The number of graduations on the clock face. It may be 4, 12 or 0. If 0 is given graduations will not shown. Default is 4.
• date JavaScript Date object. By default is current date.

Styling

jqClock provides following CSS classes to style the clock widget:

• .jqc-clock-sec span - for styling seconds hand of a clock
• .jqc-clock-min span - for styling minute hand of a clock
• .jqc-clock-hour span - for styling hour hand of a clock
• .jqc-drad span - for styling graduations of a clock dial

Browsers compatibility

The plugin is written using CSS3 transform rotate() and works in the following browsers:

• IE9.0 +
• Firefox3.6 +
• Chrome17.0 +
• Android Browser2.1 +
• Safari5.0 +
• iOS Safari3.2 +
• Opera11.6 +
• Opera Mobile11.0 +