Lightweight jQuery plugin to display nice dynamic clock with the HTML5 canvas element.
View the Project on Github
zaniitiin/bandClock
BandClock is a jQuery plugin that uses the canvas element to dynamic circular bandClock. This clock is highly customizable, very easy to implement.
This plugin supports all major browsers that support the canvas element. With excanvas you can even render the clock on IE 7+8.
To use the bandClock plugin you need to load the current version of jQuery and the source script (js) file of the plugin.
Then just add the following lines to head in to your website.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/bandClock.js"></script>
Now just add then element in your website to represent clock.
<div class="clock"></div>
Finally you have to initialize the plugin with your desired configuration:
<script type="text/javascript">
$(function() {
$('.clock').bandClock({
//your configuration goes here
});
});
</script>
You can pass a set of these options to the initialize function to set a custom behaviour and look for the plugin.
| Property | Default | Description |
|---|---|---|
| size | 300 | Size of the clock in px. It will always be in a . |
| color | #18FFFF | The color of circular band of clock. You can either pass a valid css color string. |
| bgColor | #212121 | The background color for disable rendering. |
| lineWidth | 10 | Thickness of circular band line in px. |
| lineCap | butt | defines how the edge of the band line looks like,. posible values are : butt, round and square |
| gap | 5 | Distance between band line of hours, minutes, seconds in px. |
| fontStyle | 20 Verdana | Defines font-size and font-family of the center time display |