Giter VIP home page Giter VIP logo

clockjs's Introduction

clock.js

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

http://www.michalpaszkiewicz.co.uk/clockjs/

How to use

To use this 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
	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.

Edit 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

For creating 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 a clockmaker from their ID.

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

clockjs's People

Contributors

michalpaszkiewicz avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.