Analog Clock plugin using jQuery and Css is very simple and it is a basic combination of javascript date time function and setInterval() function . The integration of analog clock plugin using jQuery is very tricky and only few lines of code. We are achieving this clock with four images and basic javascript function and css.

The integration is showing below. First you have to create an index.html file and then include the following script on the header section.

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

And the basic Css style are also need to include in the header section that you can use just below the script section or include it in a separate Css file and access it via style sheet include method. the basic Css is shown below.

<style type="text/css">
* {
margin: 0;
padding: 0;
}
#clock {
position: relative;
width: 600px;
height: 600px;
margin: 20px auto 0 auto;
background: url(images/clockface.jpg);
list-style: none;
}
#sec, #min, #hour {
position: absolute;
width: 30px;
height: 600px;
top: 0px;
left: 285px;
}
#sec {
background: url(images/sechand.png);
z-index: 3;
}
#min {
background: url(images/minhand.png);
z-index: 2;
}
#hour {
background: url(images/hourhand.png);
z-index: 1;
}
p {
text-align: center;
padding: 10px 0 0 0;
}
</style>

Analog clock using jQuery

Then your index.html body part contain the following codes.

<ul id="clock">
<li id="sec"></li>
<li id="hour"></li>
<li id="min"></li>
</ul>

All the steps are finished ? Next step is the most important section for Analog Clock plugin ie, you have already created html body section, scripts and Css are included the only thing left out is the jQuery initialization for analog clock plugin. The code section should be inside your head part of the index.html .

<script type="text/javascript">
jQuery(document).ready(function() {
setInterval( function() {
var seconds = new Date().getSeconds();
var sdegree = seconds * 6;
var srotate = "rotate(" + sdegree + "deg)";
jQuery("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
}, 1000 );
setInterval( function() {
var hours = new Date().getHours();
var mins = new Date().getMinutes();
var hdegree = hours * 30 + (mins / 2);
var hrotate = "rotate(" + hdegree + "deg)";
jQuery("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});
}, 1000 );
setInterval( function() {
var mins = new Date().getMinutes();
var mdegree = mins * 6;
var mrotate = "rotate(" + mdegree + "deg)";
jQuery("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});
}, 1000 );
});
</script>

Yes you have done ! the integration of analog clock plugin its pretty simple ?. Would you like to see a demo ? just click below link.

  Thanks for reading 🙂 🙂 🙂