HTML5-Clock.js-HTML5模拟时钟jQuery插件

clock.js是一款简单的HTML5模拟时钟jQuery插件。该HTML5模拟时钟基于Canvas制作,有3种内置的主题,它带有时钟表盘界面和数字刻度,简单实用。

使用方法

使用该时钟插件需要在页面中引入jquery和clock.js文件。

<script src='jquery.min.js'></script>                 
<script src='clock.js'></script>                 
HTML结构

可以实用一个<div>作为该模拟时钟的容器。

<div class="clock"></div>     
CSS样式

需要将时钟容器的定位方式设置为相对定位。

.clock { position: relative;}                 
初始化插件

在页面DOM元素加载完毕之后,可以通过clock()方法来初始化该时钟插件。

var clock = $(".clock").clock({
    width: 300,       // set width
    height: 450,      // set height
    theme: 't1',      // set theme  => 't1' 't2' 't3'
    date: new Date()  // set date => new Date()
}),
data = clock.data('clock');             

配置参数

  • width:时钟的宽度。
  • height:时钟的高度。
  • theme:主题,可选值有:t1,t2,t3。
  • date:设置时钟的时间。

方法

在初始化时钟对象之后,可以通过对象的dada()方法获取时钟的数据对象,该对象可以用于控制时钟的状态。

data.pause();  // 暂停时钟  
data.start();  // 开始时钟
data.setTime(new Date());  // 为时钟设置新的时间             

clock.js时钟插件的github地址为:https://github.com/CaptDai/clock

在线预览 网盘下载

网盘下载密码:dq4d

郑重声明:

1 本资源来源于互联网,资源的版权归资源原作者所持有,受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系,所以上传的部分资源无法先通过原作者的同意就分享给大家了,如本资源侵犯了您(原作者)的权益,请联系我们(微信号 xiaohaimei1989),我们会立马删除您的资源,并向您表达诚挚的歉意!

3 本站是一个公益型网站,分享资源的目的在于传播知识,分享知识,收取一点点打赏的辛苦费是用于网站的日常运营开支,并非用于商业用途。

4 本站资源只提供学习和参考研究使用,使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。

发表评论