By Sam Deering

10+ Cool jQuery Clock Tutorials (Analog and Digital)

By Sam Deering

Today’s post is a roundup of what we think the coolest jQuery analog and digital clock tutorials by which you can make your site modern and always ON TIME! Enjoy.

Related Posts:

1. CSS3 and jQuery Clock

We will simply create a clock image in Photoshop and provide different images for each hand. A jQuery script will update the rotate position every 1000 millisecond, therefore creating a rotating effect on each of the three hands.

CSS3 and jQuery Clock

Source Demo

2. HTML Clocks using JavaScript and CSS Rotation

There are no Adobe Flash files or my beloved canvas going on, just regular div and img tags. The way it works is by taking those images in an { overflow: hidden } div and rotating them, via JavaScript, using the proposed CSS transform property.

HTML Clocks

Source + Demo

3. jQuery Sliding Clock

This is a html/jQuery clock I made that moves the slides along the scales based on the current date and time.

jQuery Sliding Clock

Source Demo

4. Colorful Clock with CSS & jQuery

We are going to make a colorful jQuery and CSS clock, which will help you keep track of those precious last seconds of the year.

Colorful Clock

Source Demo

5. Colour Clock – jQuery/CSS3 Rebuild

The original Colour Clock is a brilliant idea by Jack Hughes representing time as a hexadecimal value.I rebuilt The Colour Clock using jQuery/CSS3.

Colour Clock

Source Demo

6. CSS3 Digital Clock with jQuery

In this tutorial I wanted to create a simple digital clock with date and time, with the help of jQuery script and CSS3 for a little animation, there’s nothing hard enough to understand the various methods and use your creativity in the best of ways.

CSS3 Digital Clock

Source Demo


7. jQuery Woozy Clock

jQuery woozy clock is a digital time animation representation..

Woozy Clock

Source + Demo

8. jQuery Dynamic Clock Plugin

Turns a given div element into a dynamic clock that updates every second, main advantage compared to other similar plugins is that this one can also take an initial timestamp instead of client system time.

jQuery Dynamic Clock

Source Demo

9. Old School Clock with CSS3 and jQuery

Transform:rotate is a new feature of CSS 3 which lets you… well, rotate stuff. Transform will also allow you to scale, skew and translate (move) objects in your web page. All these can be animated by the Transition property (complete with easing and duration).

Old School Clock

Source Demo

10. jDigiClock

Is a jQuery plugin that has been inspired from the distinctive HTC Hero Clock Widget. For such a complex looking plugin it is surprisingly easy to install and offers …


Source + Demo

11. Analog JQuery Clock

In this tutorial we will use JQuery and a plugin named jQueryRotate.The main idea behind making this watch is to rotate the three images according to the actual time tt/mm/ss. …

Analog JQuery Clock

Source Demo

12. CoolClock in jQuery

CoolClock is a customizable JavaScript analog clock. Though this plugin uses SVG to draw analog clocks but uses jQuery to draw them. It comes with a lot of skins to choose from. Also supports digital clock.

CoolClock in jQuery

Source Demo

  • Nandeesha

    One more jquery fancy clock plugin

    • woony

      worst clock ever?

    • dafuq is that, man? :|


      Literally the most horrible ANYTHING I have ever seen coded on the internet. You should be ashamed of yourself. :-

    • flikQ

      Hi 1996 how I’ve not missed you.

  • abc

    Kya bakwas hai??

  • Hepsi birbirinden güzel.

  • snehal

    NEED jQuery Clock which support in all browsers

  • Test

    Not good…

  • Tahir

    i need a clock which needle moving when we click on it. please give me a link of that clock. thanks

  • Johnny Hurst

    I want to create a clock that counts the rapes in south africa every 14 seconds in order to raise awareness of the issue

  • f

    third class

  • f

    we are in 2015 not in 1970

  • Rakesh Dongre

    superb !!! it is to admirable

  • Haz Hayder

    Superb ! Thanks for sharing tutorials link
    here is an another one

Get the latest in JavaScript, once a week, for free.