Deprecation warning

⚠️ This repo is deprecated - it will not be maintained any longer. Feel free to use/fork it anyway.

Try its web-component based successor here: ThyClock on npm

thooClock

a jQuery analogue clock plugin with alarm function.

visit the site

Implementation

<script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> 
<script language="javascript" type="text/javascript" src="js/jquery.thooClock.min.js"></script>  	

<script language="javascript" type="text/javascript">
  $('#myDIV').thooClock();
</script>  

Options

 $('#myDIV').thooClock({
    size: 250,                               // size of the clock
    dialColor: '#000000',                    // foreground-color of dial can be defined as hex, colorstring, or rgb, rgba function
    dialBackgroundColor: 'transparent',      // background-color of dial
    secondHandColor: '#F3A829',              // color of second hand
    minuteHandColor: '#222222',              // color of minute hand
    hourHandColor: '#222222',                // color of hour hand
    alarmHandColor: '#FFFFFF',               // color of alarm hand (alarm hand only visible if alarmTime is set to 'hh:mm')
    alarmHandTipColor: '#026729',            // color of tip of alarm hand
    timeCorrection: {                        // time correction object correction can be positive or negative
      operator: '+'                          // + or -
      hours: 2                               // number of hours 
      minutes: 15                            // number of minutes
    },                    
    alarmCount: 1,                           // how many times should the onAlarm Callback function be fired
    alarmTime: '14:25',                      // alarm time as Date object or String : "hh", "hh:mm", "hh:mm:ss"
    showNumerals: true,                      // show numerals on dial true/false
    numerals: [                              // Array of Objects with numbers as keys
      {1:1},                                 // values can be any String or number. You can draw roman dial by
      {2:2},                                 // passing the following key/values:
      {3:3},                                 // {1:'I'},{2:'II'},{3:'III'},{4:'IV'},{5:'V'},{6:'VI'},{7:'VII'}
      {4:4},                                 // {8:'VIII'}, {9:'IX'}, {10:'X'}, {11:'XI'}, {12:'XII'}
      {5:5},                                 // You don't have to set all 12 you could only set e.g. 3,6,9,12
      {6:6},
      {7:7},
      {8:8},
      {9:9},
      {10:10},
      {11:11},
      {12:12}
    ],
    numeralFont: 'helvetica',                // font for numerals
    brandText: 'THOOYORK',                   // uppercase text on clock dial
    brandText2: 'Germany',                   // lowercase text on clock dial
    brandFont: 'helvetica',                  // font face for brandText
    sweepingSeconds: false,                   // sweeping second hand true/false true is like automatic clock, false is ticking
    sweepingMinutes: true,                   // sweeping minute hand true/false
    onAlarm:function(){                      // alarm callback function 
      //callback on Alarm
    },
    offAlarm:function(){                    // end alarm callback
      //callback on Alarm end
    },
    onEverySecond:function(){               // this function is fired on every second
      //callback do sttuff every second
    }
 });

External Methods

Set Alarm time:

From a date sting:

  var strTime = '14:25'                       // must be "hh", "hh:mm" or "hh:mm:ss"
  $.fn.thooClock.setAlarm(strTime);

From a date object:

	var alarm_date=new Date();
	alarm_date.setHours(8,19,30);
	$.fn.thooClock.setAlarm(alarm_date);

Clear Alarm:

  $.fn.thooClock.clearAlarm();