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