很好用的倒计时插件 timer.jquery

timer.jquery是什么

什么是timer.jquery？
Start/Stop/Resume/Remove a timer inside any HTML element.
（在任何HTML元素内启动/停止/继续/删除计时器。）

• timer.jquery官网：官网
• timer.jquery文档：文档
• timer.jquery源码仓库：源码仓库
• timer.jquery下载地址：点此下载点此下载2

Getting started

使用此URL直接从CDNjs将插件加载到脚本标签中（加载jQuery之后）。

https://cdnjs.cloudflare.com/ajax/libs/timer.jquery/0.7.0/timer.jquery.js
或
[https://www.bootcdn.cn/timer.jquery/](https://www.bootcdn.cn/timer.jquery/)

If you are using bower,

bower install timer.jquery

或者，您可以 下载jQuery计时器插件，并将其托管在HTML文件的相对位置。 在您拥有首选方法来获取jquery和timer插件之后，请在您的网页中：

<script src="path/to/jquery.js"></script>
<script src="path/to/timer.jquery.js"></script>
<script>
(function($) {

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

}());
</script>

Usage

要使用选项启动计时器：

$("#div-id").timer(options);

Options for 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},     //(如果设置了持续时间，`callback`将被重复调用) If duration is set, `callback` will be called repeatedly
    format:     {String},   // （格式化以显示时间）Format to show time in
    editable:   {Bool}      // （如果启用了点击和编辑时间）If click and edit time is enabled
    hidden;     {Bool}      //(如果为true，则计时器不会显示在所选项目中。) If true, the timer is not displayed in the selected item.
});

初始化计时器上可用的方法：

//(暂停现有计时器)pause an existing timer
$("#div-id").timer('pause');

//(恢复暂停的计时器)resume a paused timer
$("#div-id").timer('resume');

//(删除现有计时器)remove an existing timer
$("#div-id").timer('remove');  //leaves the display intact

//(获得经过的时间（以秒为单位))get elapsed time in seconds
$("#div-id").data('seconds');

Timed Events

在一定时间后启动计时器并执行功能。 您可以使用它来模拟定时事件。

//start a timer & execute a function in 5 minutes & 30 seconds
$('#div-id').timer({
    duration: '5m30s',
    callback: function() {
        alert('Time up!');
    }
});

启动计时器，并在一定时间内重复执行功能。

//start a timer & execute a function every 2 minutes
$('#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
});

启动计时器，并在一定时间内重复执行功能，然后重置计时器。

//start a timer & execute a function every 2 minutes
$('#div-id').timer({
    duration: '2m',
    callback: function() {
        $('#div-id').timer('reset');
    },
    repeat: true //repeatedly calls the callback you specify
});

Timer state

您可以通过查询其数据对象的state属性来获取计时器的当前状态

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

Duration Syntax
当使用duration和callback参数初始化计时器时，timer插件将在设置的持续时间执行回调函数。
指定持续时间的语法是冗长的。 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

Format Syntax
默认情况下，计时器显示最大的整体单位。 例子：

• seconds: 50 will show as 50 sec
• seconds: 63 will show as 1:03 min
• seconds: 3663 will show as 1:01:03

如果要自定义计时器显示时间的格式，请使用格式选项。
计时器了解的可用格式为：

Countdown

您也可以使用jQuery计时器插件进行倒计时。

$('#timerDiv').timer({
    countdown: true,
    duration: '3m40s',      // This will start the countdown from 3 mins 40 seconds
    callback: function() {  // This will execute after the duration has elapsed
        console.log('Time up!');
    }
});