控件使用文档

飞道科技

计时器

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();
});