逼真的HTML5 canvas模拟时钟特效

所属分类:输入,其他-日期和时间,动画效果

 68854  473  查看评论 (29)
分享到微信朋友圈
X
逼真的HTML5 canvas模拟时钟特效 ie兼容10

使用该模拟时钟插件首先需要引入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();


相关插件-日期和时间,动画效果

jQuery带时间可拖动式时间轴(原创)

jQuery带时间可拖动式时间轴,代码注释全。
  日期和时间
 28214  226

jQuery日历插件

jQuery日历插件
  日期和时间
 48326  308

jQuery倒计时插件

一款距离某一时刻的一款倒计时插件刷新页面不影响倒计时进行.
  日期和时间
 34469  347

时间日历选择控件

最方面的时间日历选择控件
  日期和时间
 60670  415

讨论这个项目(29)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    _琦子_ 0
    2020/8/6 16:32:26
    看着好像还不错 回复
    曹红军 0
    2019/7/4 16:32:44
    passerma 0
    2019/3/5 19:19:54

    调用方法是

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


    回复
    半根烟,一缕思绪袅袅 0
    2019/2/15 18:49:06
    可不可以换背景?
    回复
    Mirror198829 0
    2019/1/15 15:13:41
    很不错的样式
        Mirror1988290
        2019/1/16 17:05:18
        按楼主样式 自己用vue 和canvas重新写了一个
    回复
    hunterhacker 0
    2017/10/27 10:14:03

    tahank you ,looks nice

        hunterhacker0
        2017/10/27 10:15:14

        其实我只是想知道如何获得币而已

    回复
    转角遇见猪 0
    2017/3/2 9:46:20

    真好,我也想下载一个

        hunterhacker0
        2017/10/27 10:16:00

        我也想,但是要充值

    回复
    527658433 0
    2016/12/24 11:12:14

    你们真闲,还盯着看

        夜归人0
        2017/1/8 7:01:40

        是的

    回复
    1390212868 0
    2016/7/3 11:07:15
    Mr.Liu 0
    2016/6/30 20:06:02
    好多好用的插件,超赞
        转角遇见猪0
        2017/3/2 9:49:18
        是啊,超赞
        我叫李袋袋0
        2018/9/8 11:46:54
        哈哈哈哈
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复