UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

逼真的HTML5 canvas模拟时钟特效

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

 70868  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.promptumenu

 jquery.promptumenu手机端时间选择器，开始时间选择，开始时间选择限制
  日期和时间
 32363  347

jQuery日期时间选择插件jHsDate

 一个简单的jQuery日期时间选择插件
  日期和时间
 47034  334

jQuery点击滑动购买时间选择

 jQuery选择日期的滑动块代码
  日期和时间
 31454  309

抖音超火的罗马时钟

 原生js实现抖音超火的罗马时钟，代码注释全。
  日期和时间
 45623  402

讨论这个项目（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
        哈哈哈哈
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复