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                 
                

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

格式 描述 示例
%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

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