简单实用jQuery计时器插件

PetitQ 其他代码 2018-10-29 2.72K 0 0

timer.jquery 是一款简单实用的 jQuery 计时器插件。该插件可以任何 HTML 元素中插入计时器，并对计时器进行开始，暂停，恢复和移除操作。
该计时器插件的特点还有：

轻量级插件

也想出现在这里？联系我们吧

可对计时器进行开始，暂停，恢复和移除操作

完成计时后可执行相应的回调函数

在计时器运行时可以点击和编辑

同一个页面中可以有多个计时器实例

使用方法:

使用时需要引入 jquery 和 timer.jquery.js 文件。

<script src="path/to/jquery.js" type="text/javascript"></script>

<script src="path/to/timer.jquery.js"></script>

HTML 结构:

可以使用任何元素作为计时器的容器：

```
<div id="example"></div>
```

初始化插件:

在页面 DOM 元素加载完毕之后，可以通过 timer()方法来初始化该定时器插件。

```
//start a timer
```
```
$("#div-id").timer();
```

配置参数:

该定时器插件可用的配置参数如下：

```
$("#div-id").timer({
```

    seconds:    {Int},      // The number of seconds to start the timer from

    duration:   {String},   // The time to countdown from. `seconds` and `duration` are mutually exclusive

    callback:   {Function}, // If duration is set, this function is called after `duration` has elapsed

    repeat:     {Bool},     // If duration is set, `callback` will be called repeatedly

    format:     {String},   // Format to show time in

```
    countdown: {Bool}
```
```
});
```

seconds：定时器开始的秒数

duration：定时器的定时时间

callback：定时结束后的回调函数

repeat：如果设置了 duration 参数，回调函数将被重复调用

format：显示的时间格式

countdown：是否作为倒计时器来使用

方法:

暂停定时器：

```
$("#div-id").timer('pause');
```

恢复被暂停的定时器：

```
$("#div-id").timer('resume');
```

移除指定的定时器：

```
$("#div-id").timer('remove');
```

获取已经过的时间：

```
$("#div-id").data('seconds');
```

事件:

开始一个定时器，并在指定的时间之后执行回调函数：

```
// 5分30秒之后执行回调函数
```
```
$('#div-id').timer({
```
```
    duration: '5m30s',
```
```
    callback: function() {
```
```
        alert('计时时间到！');
```
```
    }
```
```
});
```

在指定的时间间隔内重复执行回调函数：

// 每隔2分钟执行一次回调函数

```
$('#div-id').timer({
```
```
    duration: '2m',
```
```
    callback: function() {
```

        console.log('Why, Hello there');    //you could have a ajax call here instead

```
    },
```

    repeat: true //repeatedly calls the callback you specify

```
});
```

在指定的时间之后重置定时器，重新开始计时：

// 2分钟之后重置定时器，并重新开始计时

```
$('#div-id').timer({
```
```
    duration: '2m',
```
```
    callback: function() {
```
```
        $('#div-id').timer('reset');
```
```
    },
```

    repeat: true //repeatedly calls the callback you specify

```
});
```

计时器状态:

你可以通过计时器 data()对象的 state 属性来获取计时器的当前状态。

$('#div-id').data('state');     // running | paused | stopped

计时时间语法:

计时时间 h 代表小时，m 代表分钟，s 代表秒。

```
'3h15m'     // 3 hours, 15 minutes
```
```
'15m'       // 15 minutes
```
```
'30s'       // 30 seconds
```
```
'2m30s'     // 2 minutes 30 seconds
```

'2h15m30s'  // 2 hours 15 minutes and 30 seconds

默认情况下，计时器会以最大的单位作为单位来显示，例如：

```
seconds: 50 将显示为 50 sec
```
```
seconds: 63 将显示为 1:03 min
```
```
seconds: 3663 将显示为 1:01:03
```

如果你项自定义显示的时间格式，可以使用下表的格式：

格式	描述	示例
%h	不带前缀 0 的小时格式	%h hours gives 3 hours
%m	除非数值大于 60，否则显示不带前缀 0 的分钟	%h:%m minutes gives 0:6 minutes or 1:06 minutes
%g	以分钟来表示时间	%g minutes gives 75 minutes or 6 minutes
%s	除非数值大于 60，否则显示不带前缀 0 的秒数	%h:%m:%s gives 0:0:6 or 0:1:06 or 1:01:06
%t	以秒数来表示时间	%t gives 3660 or '9
%H	带前缀 0 的小时格式	%H hours gives 03 hours
%M	带前缀 0 的分钟	%H:%M minutes gives 00:06 minutes
%G	前导带 0 的以分钟来表示时间	%G minutes gives 75 minutes
%S	带前缀 0 的秒数	%H:%M:%S gives 00:00:06
%T	前导带 0 的以秒数来表示时间	%T gives 3660