Create A Beautiful Count Down Clock Using CountDown.js

31 Jan , 2014  jQuery 

Beautiful CountDownJS ClockThis inspiration tutorial teaches us how to create a beautiful count down clock using CountDown.js. This is to create a colorful ticker circles to indicate hours, minutes and seconds. Basically, we are going to develop a clock using jQuery.

Today’s Plugin: CountDown.js

Overview of the plugin CountDown.js: A simple JavaScript API for producing an accurate, intuitive description of the timespan between two Date instances.

Inspiration: We are going learn how to develop a clock using CountDown.js and jQuery. We are giving due credit to the author of this clock on codepen.

Here is the final product snap shot:

SnapCountDownClock

Check out the demo and download links below before checking the code and explanation:

DEMO | DOWNLOAD

HTML:

jQuery:

Plugins Used:

Explanation:

There is a canvas area where the demo needs to be displayed. And there are h2, h3 and h4 tags to display hours, minutes and seconds respectively.

In the jQuery, we get the canvas and the context to this canvas. We set all other settings for the hours, minutes and seconds circles.

When everything is ready, we draw the circle:

This code is used to get the system date and time:

We use fitjs to convert the time to word using the function:

DEMO | DOWNLOAD

Hope you liked this tutorial and this tutorial is for our inspiration to develop creative elements on web using various jQuery plugins available. If you have any suggestions, please let us know. We are open to your suggestions.



, ,

Comments are closed.