ClockJS

The fast, responsive, lightweight, easy-to-use JavaScript clock plugin

To use this clock plugin, simply add the following code to your page:

<canvas id="my-canvas"></canvas>
<script src="http://www.michalpaszkiewicz.co.uk/clockjs/clock.js"></script>
<script>
	var myClock = new clock("my-canvas");
	myClock.start();
</script>
					

The clock can be customised with any or all of the following options, which can be values or functions:

var options = {
	//The radius of the clock
	radius: function(){ return Math.min(self.canvas.height, self.canvas.width) / 2 },
					
	//The width of the frame/rim
	//To stop displaying rim, set this value to "none"
	rim: function(){ return getValue("radius") * 0.2; },
							
	//The colour of the frame/rim
	rimColour: "rgba(0,0,0,0.1)",
							
	//x position of centre of clock
	x: function(){ return self.canvas.width / 2 },
							
	//y position of centre of clock
	y: function(){ return self.canvas.height / 2 },
							
	//default colour of the clock
	colour:"rgba(255,0,0,0.2)",
							
	//the colour of the lines on the clock
	lineColour: function(){ return self.options.colour; },
							
	//the fill colour on the hands
	fillColour: function(){  return self.options.colour; },
							
	//default line width
	lineWidth: 1,
							
	//set to true to display the centre circle
	centreCircle: true,
							
	// radius of centre circle
	centreCircleRadius: function(){ return getValue("radius") * 0.03; },
							
	//colour of centre circle
	centreCircleColour: function(){return getValue("colour");},
							
	//radius of centre circle cutout
	centreCircleCutout: function(){ return getValue("radius") * 0.01; },
							
	//amount of hours to add to current time
	addHours: 0,
							
	//amount of minutes to add to current time
	addMinutes: 0,
							
	//amount of seconds to add to current time
	addSeconds: 0,
							
	//set to -1 to make the clock go anti-clockwise
	directionCoefficient: 1,
	
	//set type of marker for the hour points.
	//"none" displays none
	//"dot" displays dots
	//"number" displays standard numbers
	//"numeral" displays roman numerals
	markerType: "none",
	
	// set colour of hour point markers
	markerColour: function(){ return self.options.colour; },
	
	// set size of hour point markers
	markerSize: function(){ return getValue("radius") * 0.02; },
	
	// set distance from centre of clock to markers
	markerDistance: function(){ return getValue("radius") * 0.9; },
	
	//set to false to stop displaying markers.
	markerDisplay: true,
}	
						
var myClock = new clock("my-canvas", options);
myClock.start();

By default the clock will fit to the parent container, so to set the size, just set the size of the element that contains the canvas.

Here is how to add a small backwards clock in a div:

<div class="small-clock"><canvas id="backwards-clock"></canvas></div>
<script>
	var options = {
		colour: "black",
		rimColour:"black",
		rim: 1,
		directionCoefficient: -1,
		markerType: "numeral"
	}
	var blackClock = new clock("backwards-clock", options);
	blackClock.start();
</script>
<style>
.small-clock{
	height: 100%;
	width: 100%;
	max-height: 200px;
	max-width: 200px;
	display:inline-block;
}
</style>

And here is the result:

Changing the clock hands

The hands of the clock can be edited by accessing them through clock.hands after creating the clock.

myClock.hands.secondHand.length = 0.7

Handle multiple clocks

Clock.js has a clockMaker object, which can be used to handle multiple clocks. It can be used like this:

var myClockMaker = new clockMaker();

myClockMaker.addClock(myClock1);
myClockMaker.addClock(myClock2);

myClockMaker.start();

Clocks can also be added to the clockmaker through their IDs.

<canvas id="the-best-clock-in-the-world"></canvas>
myClockMaker.addClock("the-best-clock-in-the-world");	

Single clocks can be started or stopped by changing their started value inside the clockMaker, like this:

myClockMaker.clocks[1].started = false;

To see how great the performance is with the clockMaker, please see this test with 200 clocks with different times. Look at how smoothly they run!