首页 | 6022 | 539 | 269 | 添加收藏 上一个 下一个
逼真的HTML5 canvas模拟时钟特效

使用该模拟时钟插件首先需要引入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>来作为时钟的容器。


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