简单实用的jQuery计时器插件

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

• 轻量级插件。
• 可对计时器进行开始，暂停，恢复和移除操作。
• 完成计时后可执行相应的回调函数。
• 在计时器运行时可以点击和编辑。
• 同一个页面中可以有多个计时器实例。

安装

可以通过bower来安装该定时器插件。

bower install timer.jquery                  
                

使用方法

使用时需要引入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                 
                

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

timer.jquery计时器插件的github地址为：https://github.com/walmik/timer.jquery。