Canvas时钟插件clock-canvas.js

所属分类:输入-日期和时间

 22477  265  查看评论 (10)
分享到微信朋友圈
X
Canvas时钟插件clock-canvas.js ie兼容9

Canvas绘制钟表插件 clock-plug-in 

使用html5中Canvas技术,绘制钟表表盘,表面大小支持自适应。

参数:

{
    hCol: 'xxx',// 时针颜色
    mCol: 'xxx', // 时针颜色
    sCol: 'xxx', // 时针颜色
    isNumCol: 'xxx', // 数字所在的点颜色
    noNumCol: 'xxx', // 非数字所在的点颜色
    dCol: 'xxx', // 中心圈颜色
}

用户可以根据需要自定义参数值,更改表盘的颜色样式

使用

在需要生成的目标html文件中,写入 canvas 标签,画布大小可根据需要自定义,由于表盘是圆形,所以画布宽高应该设置相等,不然画出的表盘会变形。

html代码:

<div class="box">
    <canvas id="clock" width="500" height="500"></canvas>
</div>

js代码:

<script type="text/javascript">
    $(function() {
        $("#clock").drawClock(
           {
                hCol: 'xxx',// 时针颜色
                mCol: 'xxx', // 时针颜色
                sCol: 'xxx', // 时针颜色
                isNumCol: 'xxx', // 数字所在的点颜色
                noNumCol: 'xxx', // 非数字所在的点颜色
                dCol: 'xxx', // 中心圈颜色
            }
        );
    })
</script>

注意:写入以上代码前,html文件需要依次引入jQuery文件,和钟表插件js文件,保持html代码中的canvas的ID和jquery中获取的对象ID相同,示例中的元素ID为 clock

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/clock-canvas.min.js"></script>


相关插件-日期和时间

一款好用的记事日历插件,数据源可配置

一款好用的记事日历插件,数据源可配置
  日期和时间
 32352  329

jquery仿腾讯QQ空间时光轴静态页面

仿腾讯QQ空间时光轴静态页面
  日期和时间
 23252  280

jQuery弹出双日期选择插件doubleDate.js

jQuery弹出双日期选择插件doubleDate.js
  日期和时间
 34095  271

jQuery日历插件

jQuery日历插件
  日期和时间
 41488  236

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

    chaset 0
    2018/5/9 15:55:21
    边框颜色不能改,数字颜色不能改,底色不能改,突然发现亏了一百万
        张立强0
        2018/6/13 9:24:39
        您是买的吗?
    回复
    smseasyupload 0
    2018/3/16 18:03:25
    有个问题:比如说,现在是18:00:30,但是分针一直是指在12的位置, 回复
    与你同在 0
    2017/8/28 11:30:42

    表盘颜色能改吗?中心圈是哪个?

        疯青年0
        2017/8/29 20:52:25

        可以的,你看下我列出的js代码,里面dCol这个参数就是中心圈的颜色

        chaset0
        2018/5/9 15:59:25
        dcol设置了没反应
    回复
    90后大叔 0
    2017/6/16 17:50:21
    李丹 0
    2016/12/21 19:12:51

    好~…!!!…~………!?

        疯青年0
        2017/3/1 10:53:32
        谢谢你的评价
    回复
    Marvin 0
    2016/11/29 17:11:45
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复