Hi guys! Today we are going to see another great example of analog clock using the power of CSS3 and most advanced library jQuery. We will start by creating a very cool and realistic analog wall clock with pure CSS3 properties, and add a little smooth rotation for giving the clock hands a rotating effect.

analog clock using css jquery javascript

The HTML

Html part is very simple.

<div id="clock">
    <div id="hour" style="transform: rotate(334.5deg);"><img src="http://demo.web3designs.com/images/hourhand.png"></div>
    <div id="minute" style="transform: rotate(54deg);"><img src="http://demo.web3designs.com/images/minhand.png"></div>
    <div id="second" style="transform: rotate(108deg);"><img src="http://demo.web3designs.com/images/sechand.png"></div>
</div>

The CSS

Now, It’s time to play with some cool css3 properties like transition, transform and css easing.

#clock {
	background-image: url("http://demo.web3designs.com/images/clockBg.png");
	height: 200px;
	position: relative;
	width: 200px
}
#clock div {
	position: absolute;
	left:50%
}
#clock img[src*="second"] {
	transition: transform 600000s linear 0s;
}
#clock:target img[src*="second"] {
	transform: rotate(3600000deg);
}
#clock img[src*="minute"] {
	transition: transform 360000s linear 0s;
}
#clock:target img[src*="minute"] {
	transform: rotate(36000deg);
}
#clock img[src*="hour"] {
	transition: transform 216000s linear 0s;
}
#clock:target img[src*="hour"] {
	transform: rotate(360deg);
}

jQuery or Java-Script

firstly we will include the most advanced jQuery library. After adding this powerful library we will use some line of custom java-script code for rotating three hands of clock i.e. Hour, Minute and Second. That’s it.

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

BROWSER COMPATIBILITY:

As we mentioned before, this technology is developed with jQuery so it is supported by almost all major browsers. it is possible that the syntax and behavior can be changed in future versions of browsers. For today, it is supported by next browsers:

  • Chrome 15+
  • Firefox 9+
  • Safari 4+
  • IE9+
  • Opera 12+

Your turn

I hope you enjoyed this article and the techniques I used. Please share your comments and questions below! If you liked this article, please share it by clicking on the share bar below. I’d appreciate it…
view demo

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.

You may also like:

You may also like:

You can support this website by sharing. Thank you!DhirajCSS - Cascading Style SheetsHTMLJAVASCRIPTjQueryMobile Web TechnologyTutorialsadvance web technology,analog clock,analog clock current time,analog clock template,analog clock tutorial,analog clock widget,analog clock with second hand,angle brackets,animation delay,animation direction,clock widget,configurable settings,core code,CSS,CSS 3,CSS framework,css namespaces,css3,css3 analog clock,css3 box shadow,css3 clock,doctype html,elements,free open source,gaming,graphical user interface,html and xhtml,html5,interactive web applications,javascript,javascript analog clock,javascript functions,javascript programmers,jquery,jquery analog clock,jquery clock,mobile,open source javascript,page elements,programming,software-development,style,technology,visual transitionHi guys! Today we are going to see another great example of analog clock using the power of CSS3 and most advanced library jQuery. We will start by creating a very cool and realistic analog wall clock with pure CSS3 properties, and add a little smooth rotation for giving the clock...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.