Html5 canvas模拟时钟带闹钟功能实例

Html5 canvas模拟时钟带闹钟功能实例

发布时间：2015-12-23编辑：余斗文件大小：208KB阅读：(0)字号： 大 中 小

　　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>
 

　　本案例用一个空的来作为时钟的容器。代码如下：


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

　　在页面DOM元素加载完毕之后，通过thooClock()方法来初始化该时钟插件。代码如下：


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

　　设置闹钟的时间则可以使用一个字符串来实现，代码如下：


// 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();
 

　　其他参数参考：

　　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：这个函数会在每一秒都触发一次。

　　
解压后文件


预览