Clock 文字时钟组件

Clock 组件的功能相对简单，支持时、分、秒的选择，并支持自定义下拉选项。

下载

点击下载 Clock 组件及相关依赖文件

使用

Clock 依赖库或组件列表如下：

示例

文字时钟

在不指定任何选项的情况下即一个会跳秒的文字时钟。

可选择小时和分钟

一般情况下“秒”不需要选择，value属性可以设置时钟的初始值。

可选择`2`的倍数的小时和`10`的倍数的分钟

通过调整小时和分钟的间隔，设置出不同的选项。下拉框在上方显示。

指定选择项

没有显示秒，也可以设置不显示其他项。设置了下拉框左对齐。

标签和类

标签属性

标签属性可以在自定义标签上进行设置。

id或name Clock 在页面上的唯一名称。
hour-interval 小时间隔，可输入数字或逗号分隔的数字列表，数值区间为0~23。如果是数字，则按间隔计算从0点开始至23点中间的各个小时点；如果是逗号分隔的数字列表，则只在下拉选项中显示这个列表中的数字。当设置为0时，则不显示下拉列表。默认值为0。
minute-interval 分钟间隔，数值区间为0~59。计算方式同小时。默认值为0，即不显示下拉选项。
second-inteval 秒间隔，数值区间为0~50，默认值为0。计算方式同小时和分钟。这个选项一般不需要设置。
value 时钟的初始值，格式为HH:mm:ss，可用HH代替当前时间的小时，mm代替当前时间的分钟，ss代替当前时间的秒钟。如HH:mm:00，设置为当前时间的小时和分钟，但是秒钟设置为0。
hour-visible 是否显示小时部分，默认为true。
minute-visible 是否显示分钟部分，默认为true。
second-visible 是否显示秒钟部分，默认为true。
frame-class 整个 DIV 框体的样式，默认值为-clock。
hour-class 小时部分的 INPUT 样式，默认值为-clock-hour。
minute-class 分钟部分的 INPUT 样式，默认值为-clock-minute。
second-class 秒钟部分的 INPUT 样式，默认值为-clock-second。
colon-class 冒号的样式，也是一个 INPUT 元素，默认值为-clock-colon。
option-frame-class 选项 DIV 框体的样式，默认值为-clock-option-frame。
option-class 选项框体中选项 TD 的样式，默认值为-clock-option。
checked-option-class 选项框中已选中项 TD 的样式，默认值为 -clock-checked-option。

选择器

因为属于自定义 HTML 标签，一般不使用传统的选择器。可用的选择器有两个：

$clock('name') 这个选择器返回 Clock 对象，可以访问 Clock 对象的属性和方法。但是需要在页面加载完成并且标签解析之后使用。如 $finish(function() { $clock('clock1').time = '12:00:00'; });
$listen('name') 这个主要为 Clock 对象添加事件，不需要等待页面加载完成，可随时调用。如
$listen('name').on('HourChanged', function(hour) { console.log(hour); });
仍可以使用原生的选择器，但只支持按名选择，如$s('#Clock1')、$a('#Clock1,#Clock2')。

属性

Clock 对象只有几个简单的属性：

time 获取或设置文字时钟的时间，格式HH:mm:ss，如12:30:00。
hour 获取或设置时钟的小时。
minute 获取或设置时钟的分钟。
second 获取或设置时钟的秒钟。

方法

Clock 对象没有可用的方法。

事件

onHourChanged 当小时改变后触发，传递hour参数
onMinuteChanged 当分钟改变后触发，传递hour参数
onSecondChanged 当秒钟改变后触发，传递second参数
onTimeChanged 当任何时间位改变后触发，传递time参数，格式yyyy-MM-dd

例如：

参考链接