jQuery realistic analog clock widget

1. Introduction

Article will showcase a super realistic analog clock written in jQuery, HTML and CSS3 by Codehim.

2. Links

Demo

Download

Documentation

3. Features

• Fully customizable, simple adoptation to your needs,
• Attractive and clear design,
• Clock is available in 3 Sizes, X small, X large and Original Size 250 by 250,
• CSS3 transformation based clock's hands motion,
• Exact time - according to the server time,
• Stylish Date and day badge,
• Chrome, Safari, Firefox, Opera, IE7+, IOS, Android and windows phone supported.

4. How to install

Widget runs as jQuery plugin so first include jquery javascript into your website:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Import Codehim Clock plugin's JavaScript & CSS files into the HTML document:

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

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

Create container on your website in which you want to display clock widget. It can be placed anywhere on your website:

<div class="analog-clock-place"></div>

Call CodehimClock() function with this selector in DOM ready function:

$(function() {
    $(".analog-clock-place").CodehimClock();
});

There are three possible widget sizes you can use:

• original

  Copy

  $(function() {
  $("..analog-clock-place").CodehimClock({
       clockSize: "original"
   });
  });
  

• xsmall

  Copy

  $(function() {
  $(".analog-clock-place").CodehimClock({
       clockSize: "xsmall"
   });
  });
  

• xlarge

  Copy

  $(function() {
  $(".analog-clock-place").CodehimClock({
       clockSize: "xlarge"
   });
  });
  

  To hide/show seconds hand use showSeconds attribute:

  Copy

  $(function() {
  $(".analog-clock-place").CodehimClock({
       showSeconds: : true, //false to hide seconds hand
   });
  });
  

To show date and day in clock use showDate attribute:

$(function() {
  $(".analog-clock-place").CodehimClock({
       showDate: : true, //false to hide date and day - default is true
   });
});