jQuery realistic analog clock widget

July 26, 2019 No comments JS Library javascript clock css analog

1. Introduction

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

Jquery realistic analog clock widget

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

    $(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 }}