您当前的位置:主页 > 资源下载 > Html5模版网站首页Html5模版

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

发布时间:2015-12-23编辑:余斗文件大小:208KB阅读:(0)字号:
      thooClock是一款效果非常逼真的HTML5 canvas模拟时钟特效。该时钟特效使用jQuery和HTML5 Canvas API来制作,模拟现实生活中的时钟。并且它还具有定时闹钟的功能。   使用该模拟时钟插件首先需要引入jQueryjquery.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:这个函数会在每一秒都触发一次。   Html5 canvas模拟时钟带闹钟功能实例
    解压后文件

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

  1. 预 览
  2. 下 载
下载说明: 1、解压密码:yudouyudou 2、只有部分模板会提供多页面下载,未加说明都是只有一个首页index.html模板。 3、如果您发现模板或软件有错,或者您有其他更好的意见、建议请给我留言,我会及时处理! 4、如果您遇到什么问题,也可加余斗QQ 548474762 咨询! * 受百度影响,部分网盘资源可能失效,如果您发现资源失效了,请及时留言或联系余斗 * * 下载本站模板以及软件仅供学习研究之用,若发现任何组织机构及个人有用于商业目的者,必追究其法律责任 *
关键字词html5 canvas 模拟时钟
余斗余斗
  1. 转载请注明: Html5 canvas模拟时钟带闹钟功能实例_余斗余斗_鸿运国际手机登录首页
  2. 版权声明: 本站原创文章,由 发表在 Html5模版 分类下,于2015-12-23最后更新
手绘风格的鸿运国际手机登录首页模板(01)
医院网站适用的404页面模版(2)
手机扫一扫 随身带着看
鸿运国际手机登录首页