Jquery Plugin
Clock

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.

  • 4.5/5.0
  • Last updated 09 September, 2022
  • By Admin

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..

<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());

I hope it can help you. Download source code.