HTML5 and CSS3 Based jQuery Analog / Digital Clock Plugin

484

In this post I am going to share cool stylish HTML5 and CSS3 Based jQuery Analog / Digital Clock Plugin for your website. you can add this clock on your website home or admin dashboard to make your web page more attractive & stylish. The plugin name is clock.js which help you to add analog and digital clock with inbuilt 3 theme set as your website look and feel. you choose any of them which best suite to your website layout.

Add HTML5 and CSS3 Based jQuery Analog / Digital Clock On Your Website

Libraries

First of all add jQuery latest core library after that add plugins library clock.js.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/clock-1.1.0.min.js"></script>

HTML

Add html div wehere you need to display clock.

<div class="clock"></div>

JS

Call the plugin’s function to render a default clock inside the clock DIV container you just created.

$(function() {   
  $(".clock").clock()
});

You can also customize the clock with the following predefined options.

var clock = $(".clock").clock({
        width: 300,       // set width
        height: 450,      // set height
        theme: 't1',      // set theme  => 't1' 't2' 't3'
        date: new Date()  // set date => new Date()
    }),
    data = clock.data('clock');
 
    // data.pause();      
 
    // data.start();    
 
    // data.setTime(new Date());

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.