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