首页 | 2860 | 574 | 287 | 添加收藏 上一个 下一个
Clock.jsHTML5模拟时钟jQuery插件

使用方法


使用该时钟插件需要在页面中引入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());  // 为时钟设置新的时间