Live Ticking Javascript + CSS clock

This example shows a nice clock

Javscript Clockworks

Javascript (if available) moves the background images of the second clock so that it appears the clock is ticking.

Clock image

Here is the clock background used. All three hands uses the same png image. Each clock hand "frame" is 80x80 pixels

Making the clock image

Drawing a each clock hand for every position they may have, would require 180 drawings. I wasn't going to do that just to try this technique out... so I wrote some JavaScript for PhotoShop to make it generate the image for me. the PhotoShop Javascript can be seen below or downloaded directly here

Photoshop clock hand drawing JavaScript

 sizeY ? sizeX : sizeY;
	sizeR = sizeR / 2 - sizeR / 10;
	sizeR = parseInt(prompt('Please enter the length of the hand', sizeR));
	if(!sizeR) throw 'No hand length entered!';
	var sizeF = 60;
	sizeF = parseInt(prompt('Please enter the number of frames', sizeF));
	if(!sizeF) throw 'No number of frames entered';
// Create the document
	var d = documents.add(sizeF * sizeX, sizeY, 72.0, 'Clockarm'+documents.length+1, NewDocumentMode.RGB, DocumentFill.TRANSPARENT);	

// setup the lines
	var aLines = new Array(sizeF);
	
// Define variables for the loop
	var aLine = null, sx, sy, tx, ty, g;
	var sy = Math.round(sizeY / 2);
	
	var pi2 = Math.PI*2;
	
	for(var i = 0; i < sizeF; i++){
	// Calc the start x point
		sx = Math.round(i*sizeX + (sizeX / 2));
		
	// Add the start point
		aLine = new Array(1);
		aLine[0] = new PathPointInfo;
		aLine[0].kind = PointKind.CORNERPOINT;
		aLine[0].anchor = aLine[0].leftDirection = aLine[0].rightDirection = [sx, sy];
		
	//  Calculate the end XY point
	//	--90 degs to make it start in the top
		g = (i - sizeF / 4) / sizeF * pi2;
		tx = Math.round(Math.cos(g)*sizeR)+sx;
		ty = Math.round(Math.sin(g)*sizeR)+sy;
		
	// Add the end point
		aLine[1] = new PathPointInfo;
		aLine[1].kind = PointKind.CORNERPOINT;
		aLine[1].anchor = aLine[1].leftDirection = aLine[1].rightDirection = [tx, ty];
		
	// Add the first line to the lines 	
		aLines[i] = new SubPathInfo();
		aLines[i].operation = ShapeOperation.SHAPEXOR;
		aLines[i].closed = false;
		aLines[i].entireSubPath = aLine;
	}
// Add the lines to the document layers

	var clockpaths = d.pathItems.add('ClockHandsShape', aLines);
	
// Draw it out
	clockpaths.strokePath(ToolType.BRUSH);
	
}catch(e){
	alert('Could not create a new clock:\n'+e);
}

// Done!, Restore units
preferences.rulerUnits = strtRulerUnits;
preferences.typeUnits = strtTypeUnits;
]]>