Realistic Analog Clock With jQuery And CSS3 - Codehim Clock

File Size: 11.2 KB
Views Total: 4337
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Realistic Analog Clock With jQuery And CSS3 - Codehim Clock

The Codehim Clock jQuery plugin lets you create a responsive, customizable, realistic Analog Clock with 3 size variables and optional second/date/day display.

Can be used to display the current local time and date in any time zone.

How to use it:

1. Import jQuery JavaScript library and the Codehim Clock plugin's JavaScript & CSS files into the HTML document.

<script src="" 

<!--Codehim Clock JS-->
<script src="js/jquery.codehim.clock.js"></script>

<!--Codehim Clock CSS-->
<link rel="stylesheet" href="css/codehim-clock.css">

2. Create a containe in which you want to place the analog clock.

<div class="clockContainer"> 

3. Call the plugin to generate a default analog clock.




4. Set the size of the analog clock. Possible options: xsmall and xlarge.

  clockSize: "original"

5. Show/hide the second hand.

  showSeconds: true

6. Show/hide the date and day.

  showDate: true

This awesome jQuery plugin is developed by CodeHimBlog. For more Advanced Usages, please check the demo page or visit the official website.