jQuery realistic analog clock widget

October 23, 2018 No comments JS Library javascript clock css analog

Super realistic analog clock written in jQuery, HTML and CSS3 by Codehim.

Jquery realistic analog clock widget

Demo

Download

Documentation

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.

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

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

    $(function() {
    $(".analog-clock-place").CodehimClock({
         clockSize: "xsmall"
     });
    });
    
  • xlarge
    $(function() {
    $(".analog-clock-place").CodehimClock({
         clockSize: "xlarge"
     });
    });
    
    To hide/show seconds hand use showSeconds attribute:
    $(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
   });
});
{{ message }}

{{ 'Comments are closed.' | trans }}