Canvas时钟插件clock-canvas.js

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

 2202  18  查看评论 (2)
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>


相关插件-日期和时间

mobiscroll2.13.2手机滑动选择日期时间插件(带星期)

根据mobiscroll2.13.2手机滑动选择日期时间插件(带星期)修改的插件,nowText:
  日期和时间
 13949  110

JQuery日期选择插件

支持中文,可以选择日期,不能选时间,有demo
  日期和时间
 8502  24

延迟跳转

延迟跳转,数字倒数,简单但很实用。很多地方都要用到的。
  日期和时间
 6356  40

jquery日期日历选择控件

jquery日期日历选择控件
  日期和时间
 21083  44

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币

    李丹0
    2016/12/21 19:12:51

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

    回复
    Marvin0
    2016/11/29 17:11:45
    这个钟表插件能发给我一份吗?谢谢了2987200051@qq.com 回复
取消回复
    PROMULGATOR

    疯青年

    广东省珠海市北京市