Experiment with a Simple jQuery/CSS Clock

It may seem a bit of a basic experiment, but I thought I would experiment a bit with jQuery and create a simple clock. The concept is basic, but understanding the basics can lead to even greater discoveries. This jQuery sets the angle of the “moz” properties in the CSS, so it is not available in IE. Perhaps there is another solution, but this is my experiment with the rotate plugin.

This clock contains four images, one GIF for the background graphics and three transparent PNG’s for the hour, minute, and second hands where the rotation point is exactly in the center of the graphic. The position for the CSS was placed so all the images stack directly on top of one another. It then uses a setInterval to check the time every second and rotate the hands accordingly. The logic simply breaks down the angle the hand needs to be. Since there 360° in a circle, and 60 seconds within that circle, the math is as easy as 360/60*t. Hours get multiplied five times what the seconds and minutes get since the hour sits on every fifth interval of the minute (or second) angle.

Sure, this is not breakthrough programming. It was simply good for me to demonstrate the ease that jQuery makes rotating an image with very little code. It uses a simple jQuery plugin to simplify the process. Here is the code if interested:

$j=jQuery.noConflict();
checkTime();
ct = setInterval(checkTime, 1000);
function checkTime(){
	//var t = new Date();
	var d=new Date();
	var h=d.getHours();
	var m=d.getMinutes();
	var s=d.getSeconds();
	$j('#hour').css('rotate', 360/60*h*5);
	$j('#minute').css('rotate', 360/60*m);
	$j('#second').css('rotate', 360/60*s);
	if (h<10){
		h="0"+h
	}else if (h>12){
		h-=12;
		if (h<10){
			h="0"+h
		}
	}
	if(m<10){
		m="0"+m
	}
	if(s<10){
		s="0"+ s
	}
	$j('#curTime').html("The time is " + h +":" +m+":" +s)
}