Jquery Analog Clock Example - Jquery
How to create analog clock using jquery?
Snippet Code
Rate this page :
|
[ 0 votes]
|
Analog clock is created through simple codes of jquery. The analog clock makes your site modern and always on time.To download the analog clock images copy and paste the link "https://www.hscripts.com/codes-snippets/images/clock.zip".
<script type="text/javascript">
function Clock_dg(prop) {
var angle = 360/60,
date = new Date();
var h = date.getHours();
if(h > 12) {
h = h - 12;
}
hour = h;
minute = date.getMinutes(),
second = date.getSeconds(),
hourAngle = (360/12) * hour + (360/(12*60)) * minute;
$('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)';
$('#second')[0].style[prop] = 'rotate('+angle * second+'deg)';
$('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)';
}
$(function(){
var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
prop,
el = document.createElement('div');
for(var i = 0, l = props.length; i < l; i++) {
if(typeof el.style[props[i]] !== "undefined") {
prop = props[i];
break;
}
}
setInterval(function(){
Clock_dg(prop)
},100);
});
</script>
<style>
#analog_clock {
background-image: url("clockBg.png");
height: 200px;
position: relative;
width: 200px
}
#analog_clock div {
position: absolute;
left:50%
}
#analog_clock img[src*="second"] {
transition: transform 600000s linear 0s;
}
#analog_clock:target img[src*="second"] {
transform: rotate(3600000deg);
}
#analog_clock img[src*="minute"] {
transition: transform 360000s linear 0s;
}
#analog_clock:target img[src*="minute"] {
transform: rotate(36000deg);
}
#analog_clock img[src*="hour"] {
transition: transform 216000s linear 0s;
}
#analog_clock:target img[src*="hour"] {
transform: rotate(360deg);
}
</style>
<div id="analog_clock">
<div id="hour" style="transform: rotate(334.5deg);"><img src="hourhand.png"></div>
<div id="minute" style="transform: rotate(54deg);"><img src="minhand.png"></div>
<div id="second" style="transform: rotate(108deg);"><img src="sechand.png"></div>
</div>
