HTML5 and CSS3 Based jQuery Analog / Digital Clock Plugin

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 where you need to display clock.

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.

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.

Related