Lightweight plugin to render simple, retina optimized dynamic clock
- Highly customizable
- Very easy to you
- Works in all modern browsers
- jQuery plugin (~921 bytes)
To use the band clock plugin you need to load the current version of jQuery (> 1.6.4)
##Install with Bower You can also install and manage BandClock using Bower:
$ bower install bandClock<div class="clock"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/path/to/bandClock.js"></script>
<script>
$(function () {
$(.clock).bandClock({
// your options goes here
});
})
</script>You can pass these options to set a custom look and feel 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 |
To run the test just use the karma adapter of grunt: grunt test
Native support
- Chrome
- Safari
- FireFox
- Opera
- Internet Explorer 9+
Copyright (c) 2015 Nitin Jha, contributors. Released under the MIT, GPL licenses.