html怎么插计时器,简单实用的jQuery计时器插件

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

轻量级插件。

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

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

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

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

安装

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

bower install timer.jquery

使用方法

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

HTML结构

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

初始化插件

在页面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