使用 tictac.js 实现倒计时

Tictac.js（GitHub，Demo）是应项目需要写的一个倒计时组件，比较简洁（或者说简单），主要功能是：

“当前时间”可配置，可以使用服务端时间
可以设定一个时间间隔，周期性执行回调函数
注册任意多个“计时器”实例，每个计时器结束会触发回调函数
自定义倒计时的时间展示格式

先看看使用示例：

Tictac.init({
  currentTime: Date.parse('2015/01/01 00:00:00'), //设置当前时间
  interval: 3000, //执行callback的时间间隔
  callback: function () {
    //重复执行的回调
  },
})

Tictac.create('id1', {
  targetId: 'id1', //显示计时器的容器
  expires: Date.parse('2050/01/01 00:00:00'), //目标时间
  format: {
    //格式化对象
    days: '{d}天 ',
    hours: '{hh}小时 ',
    minutes: '{mm}分 ',
    seconds: '{ss}秒',
  },
  timeout: function () {
    //计时器 timeout 回调
  },
})

//任意多个....

Tictac.create('idn', {
  targetId: 'idn',
  expires: Date.parse('2015/01/01 00:00:15'),
  format: {
    minutes: '{mm}分 ',
    seconds: '{ss}秒',
  },
  timeout: function () {
    //....
  },
})

在线 Demo

下面具体讲一下怎么用：

`init`#

初始化函数，注册计时器前必须先初始化。参数：

currentTime 当前时间（时间戳），可设置服务端时间或者直接+new Date()
interval 执行callback 的时间间隔\
callback 重复执行的回调函数

具体例子看上面的就好了。

`create`#

创建一个计时器，就像上面代码里写的那样，接受两个参数。第一个参数是 ID，一般用 string 或者 int 类型都可以，第二个参数是个对象，包含以下字段：

targetId 字符串，输出“剩余时间字符串”的容器 ID
expires 时间戳，计时器的目标时间（或者说是过期时间）
format 倒计时时间的格式化对象，这个下面单独说\
formatIgnore 配合 format 使用的，下面和 format 一起说讲\
timeout 超时函数，到达expires 指定的时间后触发

具体例子上面代码里也有。

`reset`#

重新设置计时器，参数与create 方法完全相同。例如：

Tictac.reset('id5', {
  expires: 1403860277271,
})

`remove`#

根据 ID 删除一个计时器，例如：Tictac.remove('id1')

`execute`#

立即执行初始化时设置的callback 回调。例如你指定每 5s 执行一次callback ，上一次执行callback 后的 3s，调用Tictac.execute() 会立刻再执行回调，再过 5s 会再次执行（注意，不是 2s 了）。

`getCurrentTime`#

返回“当前”时间的时间戳，是根据初始化时设置的时间计算的。

`regulate`#

接受一个时间戳，用来校正当前时间，需要使用服务端时间计时的时候，可以使用此方法定期校正。关于使用服务端计时的方案，可以参考stackoverflow。服务端计时精度还是不太满意，尤其是服务器压力大，并发量多的时候，我在项目中使用 Tictac 的时候，只在初始化的时候取了一次服务端时间，大家有什么好的方案欢迎交流。

`destroy`#

销毁 Tictac 已经注册的所有计时器。

格式化对象#

所谓的“格式化对象”，就是用来显示倒计时的时间的。例如：5 分 12 秒。格式化对象一般是下面这样：

{
    days: '{d}天 ',
    hours: '{hh}小时 ',
    minutes: '{mm}分 ',
    seconds: '{ss}秒'
}

当然如果你只需要精确到天的话，可以只保留days 。另外，设置formatIgnore 为true （默认也是 true）的话，会隐藏空值，就拿上面的对象来说，如果现在离目标时间还有 n 多天，那么会完整的显示“XX 天 XX 小时 XX 分 XX 秒”，如果是同一天，就只显示“XX 小时 XX 分 XX 秒”。另外，{hh} 和{h} 的区别就在于时数小于 10 的时候，例如 8，是显示 08 还是 8。

大概就这么多了，Tictac 是应项目而生的，可能适用的场景不是很广，也不够严密（类型判断之类的都没有做），加上这类型的代码比较简单，需求多样，难以组件化（想了很久），所以就直接按现有的功能放出来分享。**源码里注释比较多，大家有什么需要可以直接改，不清楚的地方也可以直接看源码，也欢迎交流。**

init#

create#

reset#

remove#

execute#

getCurrentTime#

regulate#

destroy#