计时器
Tag
需设置控件的宽高,并设置控件display样式
<fd-wh000015 id='fd-wh000015-001' pre-text='开始计时' initial-time='0' show-type='3' to-fixed='0'></fd-wh000015>
Attributes
pre_text
倒计时开始之前显示的文字。必传
to-fixed
秒之后精确几位。可选值 0/1/2/3
to-fixed === 0, 展示为 00:01:12
to-fixed === 1, 展示为 00:01:12.1
to-fixed === 2, 展示为 00:01:12.12
to-fixed === 3, 展示为 00:01:12.123
initial_time
初始时间
和to-fixed搭配使用
to-fixed === 0, initial_time === 5, 表示5秒
to-fixed === 1, initial_time === 5, 表示5毫秒
to-fixed === 2, initial_time === 5, 表示50毫秒
to-fixed === 3, initial_time === 5, 表示500毫秒
show-type
展示的时间样式,可选值 0/1/2
show-type=== 0,展示为 0 天 00 小时 00 分钟 04 秒
show-type=== 1,展示为 0 天 00:00:04
show-type=== 2,展示为 00:00:03, 天以小时展示
Methods
start()
开始计时,无参
stop()
停止计时,无参
返回值:
{
"current_time": 45664, // 当前时间戳,单位毫秒
"initial_time": _t.initial_time, // 初始时间,单位毫秒
"marks": [100,200,3000] // 标记的时间戳数组,单位毫秒
}
continue()
继续计时,无参
reset()
复位,重新开始,无参
返回值:
{
"current_time": 45664, // 当前时间戳,单位毫秒
"initial_time": _t.initial_time, // 初始时间,单位毫秒
"marks": [100,200,3000] // 标记的时间戳数组,单位毫秒
}
mark()
计次,无参
返回值:
{
"current_time": 45664, // 当前时间戳,单位毫秒
"initial_time": _t.initial_time, // 初始时间,单位毫秒
"marks": [100,200,3000] // 标记的时间戳数组,单位毫秒
}
Example
html
<fd-wh000015 style="display:block;width:500px;height:50px;" id='fd-wh000015-001' pre-text='开始计时' initial-time='0' show-type='2' to-fixed='0'></fd-wh000015>
<input data-feidao-id='start' type="button" value="开始计时">
<input data-feidao-id='stop' type="button" value="暂停计时">
<input data-feidao-id='continue' type="button" value="继续计时">
<input data-feidao-id='reset' type="button" value="复位">
<input data-feidao-id='mark' type="button" value="计次">
js
const widget = document.querySelector('#fd-wh000015-001');
const start = document.querySelector('[data-feidao-id="start"]');
const stop = document.querySelector('[data-feidao-id="stop"]');
const _continue = document.querySelector('[data-feidao-id="continue"]');
const reset = document.querySelector('[data-feidao-id="reset"]');
const mark = document.querySelector('[data-feidao-id="mark"]');
start.addEventListener('click', () => {
widget.start();
});
stop.addEventListener('click', () => {
const res = widget.stop();
console.log(res);
});
_continue.addEventListener('click', () => {
widget.continue();
});
reset.addEventListener('click', () => {
widget.reset();
});
mark.addEventListener('click', () => {
widget.mark();
});