sad cow

web design, jQuery plugins, web tools and general stuff about the internet by matt squirrell.
not exactly unique but hopefully better...

RSS Feed

jQuery / CSS Clock

Rafi from made a lovely image of an alarm clock which handily came in different layers, so I set upon taking it to bits and turning it into a 'real' clock.
It was fairly simple - first I saved the clock with no hands as a png, then I resized the three hands to have a transparent area that doubled the height (allowing them to rotate around a centre point accurately) and saved each separately.

Simple CSS and HTML allowed me to stack them on top of the clock background: 
<div class="clockholder">

    <div class="clock"></div>

    <div class="hours"></div>

    <div class="minutes"></div>

    <div class="seconds"></div>

</div>



.clockholder {

    height: 535px;

    width: 750px;

    margin: 20px auto;   

    position: relative;

}



.clock, .hours, .minutes, .seconds {

    position: absolute;    

}



.clock {

    width: 750px;

    height: 600px;

    top: 0px;

    left: 0px;

    z-index: 1;

    background: transparent url(electronic-alarm-clock.png) no-repeat;

}



.hours {

    width: 21px;

    height: 230px;

    top: 185px;

    left: 328px;

    z-index: 2;  

    background: transparent url(hours.png) no-repeat;    

}



.minutes {

    width: 15px;

    height: 318px;

    top: 139px;

    left: 331px;

    z-index: 3;    

    background: transparent url(minutes.png) no-repeat;

}



.seconds {

    width: 36px;

    height: 344px;

    top: 129px;

    left: 320px;

    z-index: 4;    

    background: transparent url(seconds.png) no-repeat;

}

Then just a little jQuery magic (with the CSS3 Rotate plugin) let me set the time:
$("document").ready(function() {

    var stopclock = setInterval("updateTime()", 1000);  

});



function updateTime() {

    var currentTime = new Date();

    var hours = currentTime.getHours();

    var minutes = currentTime.getMinutes();

    var seconds = currentTime.getSeconds();



    if (hours > 11) {

        hours -= 12;

    }

    

    if (seconds == 0) {

        $(".seconds").css({'rotate': (seconds * 6)}); 

    } else {

        $(".seconds").animate({'rotate': (seconds * 6)}, 250); 

    }

    

    $(".minutes").animate({'rotate': (minutes * 6)}, 250);

    $(".hours").animate({'rotate': (hours * 30)}, 250);

}

Simple - I make a function to get the time, do a spot of maths to make the time units into a rotation angle, then animate the clock. Then I call that function once per second.

Check out the finished article: http://www.sadcow.co.uk/demo/clock.

UPDATE: Commenter DavPaz points out that the clock seems an hour slow - that was because the hour hand only moved when the hour changed.
I've adjusted the code to take the minutes into account so the hour hand moves as expected. 
$(".hours").animate({'rotate': ((hours * 30) + (minutes / 2))}, 250);


UPDATE 2: I wasn't happy with the second hand 'jumping' to the zero seconds position, so I made another small change:
    if (seconds == 0) {

        $(".seconds").animate({'rotate': 360}, 250); 

    } else {

The reason for animating it to 360, by the way, is to stop it whizzing backward when it switches from 356 to 0 (ie 59 seconds to 0 seconds). Once it's at 360, the plugin is quite happy to move it the right direction to get to 6.

External Link Icon
Using JS for custom-font titles
:(

I am Matt Squirrell.

And this is the sort of thing I do.

I can design and build rich, feature-filled websites like this one. Ask me nicely and I might even do it with less than 700KB of images.

I started this website because I'm constantly coming up with neat little fixes, chunks of code, plugins or tricks, and then forgetting about them in a week. This is as much for me as it is for you (but it certainly is nice to share bits and pieces with other people).

It will also serve as a central point for all the other things I have done that have found their way to the Internet - from strange MMO God-sims to a 'Choose your own adventure' maker.

You are more than welcome to hire me if you've got your own web project you want to do - if you can think it I can pretty much make it. I'm cheaper than paying someone from the bargain basement to do it and then having to pay someone good to fix all the problems, too!

Anyway, until I think of a better way to sign off, I only hope you found something useful up there above ground.

Click on the cow ;o)

Contact me. If you like.

Valid XHTML 1.1