JS Clock

Client time clock

This clock ticks in sync with whichever time the user's OS has.

Start from 11:11:11

This clock always starts ticking from 11:11:11, whenever this page is loaded. It could just as easily be set to start ticking in sync with any time you choose, all you need to do is have your back-end pass in the required time as a string in the format 'HH:MM:SS' to the plugin call. Do try to take into account the mean network delay, if you can.

JS Clock is a jQuery plugin which allows you to easily introduce real live clocks and countdown timers into your web pages and apps. These clocks (note the plural form) can be set to tick 100% independently of each other. Not only that, but they don't need to be in sync with the time from the client, as they can be set independently or in groups (you choose) to start ticking from an arbitrary initial time, set by you. This plugin was conceived with easy back-end integration in mind, and it is extremely simple to use. As of version 0.8 it does a lot more than what is demoed here. Be sure to check out the Annotated Source if you're curious to see what else can it do and how it works.

To replace the innerHTML of the selected elements with a clock in sync with the client time (uses Javascript's Date object) do this:

$(document).ready(function(){
   $('some-selector').jsclock();
});

To have it count the time independently of the client time through the plugin built-in clockwork algorithm, NOT Javascript's Date object, do this:

$(document).ready(function(){
   $('some-selector').jsclock('14:29:36');
});

The string given must be in the HH:MM:SS format, leading zeros are required, if any.

• This is a jQuery plugin and as such it requires jQuery to be loaded first on the HEAD section of your document before it can be called.
• You should also make sure to use the jQuery 'ready' event, as was done on the examples above.
• In the case that the user's browser doesn't have Javascript enabled it is good manners to let they know about it, by having a message on the element whose innerHTML should be substituted by the clock, such as: There should be a clock here. Please enable Javascript to see it.
• Avoid making more than one plugin call for clocks with the same time. Use Sizzle to do that.
• The plugin will show an error message instead of the clock if the time defining parameter passed in is invalid, either it be by bad formatting or by stating an impossible time, like 25:60:60.

This plugin is dual licensed under the MIT and GPL licenses. Just make sure to leave the copyright and licensing info intact on the files you use, ok?

Because time is of the essence. ;)