Html5 canvas模拟时钟带闹钟功能实例
发布时间:2015-12-23编辑:余斗文件大小:208KB阅读:(0)字号: 大 中 小
【资源下载】 音乐、电影、剧集、课程、动漫、电子书、有声书、软件...都在这里! 【免费下载】 开通特权 ,各类千余TB网络资源免费下,日日更新,一次开通,终身可用!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:这个函数会在每一秒都触发一次。
解压后文件
预览
套路很深,不支持下载! 解压密码:yudouyudou