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.