thooClock是一款效果非常逼真的HTML5 canvas模擬時鐘特效。該時鐘特效使用jQuery和HTML5 Canvas API來制作，模擬現實生活中的時鐘。并且它還具有定時鬧鐘的功能。
使用該模擬時鐘插件首先需要引入jQuery和jquery.thooClock.js文件。
- <script type="text/javascript" src="js/jquery-latest.min.js"></script>
- <script type="text/javascript" src="js/jquery.thooClock.js"></script>
HTML結構
可以使用一個空的<div>來作為時鐘的容器。
- <div id="myclock"></div>
初始化插件
在頁面DOM元素加載完畢之后，可以通過thooClock()方法來初始化該時鐘插件。
- <script type="text/javascript">
- $('#myDIV').thooClock();
- </script>
配置參數
下面是該時鐘插件的可用配置參數：
size：默認值：250。時鐘的大小。
dialColor：默認值：'#000000'。時鐘的前景色。可以是hex，顏色關鍵字，rgb或rgba顏色值。
dialBackgroundColor：默認值：'transparent'。時鐘的背景顏色。
secondHandColor：默認值：'#F3A829'。時鐘秒針的顏色。
minuteHandColor：默認值：'#222222'。時鐘分針的顏色。
hourHandColor：默認值：'#222222'。時鐘時針的顏色。
alarmHandColor：默認值：'#FFFFFF'。鬧鐘指示的顏色(鬧鐘指示只有在alarmTime設置為'hh:mm')時才可見。
alarmHandTipColor：默認值：'#026729'。鬧鐘指示的提示框顏色。
hourCorrection：默認值：'+0'。小時校正。例如：+5或-3。
alarmCount：默認值：1。鬧鐘會響多少次。
alarmTime：響鬧鐘的時間。可以是Date對象或字符串：hh，hh:mm，hh:mm:ss。
showNumerals：是否在時鐘上顯示數字。
brandText：時鐘的品牌名稱。
brandText2：時鐘的產地名稱。
onAlarm：鬧鐘的回調函數。
offAlarm：鬧鐘結束時的回調函數。
onEverySecond：這個函數會在每一秒都觸發一次。
方法
設置鬧鐘時間
可以使用一個字符串來設置鬧鐘時間：
- // must be "hh", "hh:mm" or "hh:mm:ss"
- var strTime = '14:25'
- $.fn.thooClock.setAlarm(strTime);
也可以使用一個Date對象來設置鬧鐘時間：
- var alarm_date=new Date();
- alarm_date.setHours(8,19,30);
- $.fn.thooClock.setAlarm(alarm_date);
清除鬧鐘
- $.fn.thooClock.clearAlarm();
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。