Customizable Analog & Alarm Clock with jQuery and Canvas - thooClock

Customizable Analog & Alarm Clock with jQuery and Canvas - thooClock

thooClock is a jQuery plugin used to create a responsive, highly configurable and styleable Analog Clock with alarm functionality using html5 canvas 2D API.

Basic usage:

1. Download the plugin, unzip and upload the JS, CSS, alarm.mp3, alarm to your web hosting.

2. Link to jQuery library and the jquery.thooClock.js script.

<script src="jquery-latest.min.js"></script> 
<script src="js/jquery.thooClock.js"></script>  

3. Create a container for the Analog Clock.

<div id="myclock"></div>

4. Initialize the plugin.

$('#myclock').thooClock({
  /* OPTIONS and CALLBACKS HERE */
});

5. Customization options.

size:250,
dialColor:'#000000',
dialBackgroundColor:'transparent',
secondHandColor:'#F3A829',
minuteHandColor:'#222222',
hourHandColor:'#222222',
alarmHandColor:'#FFFFFF',
alarmHandTipColor:'#026729',
hourCorrection:'+0',
alarmCount:1,
showNumerals:true

6. Callback functions.

onAlarm: function(){},
offAlarm: function(){},
onEverySecond: function(){},

Change log:

2018-04-19

  • Bugfixed hourCorrection

This awesome jQuery plugin is developed by thooyork. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 19.04.2018
  • Source