使用 tictac.js 实现倒计时

Tictac.js(GitHubDemo)是应项目需要写的一个倒计时组件,比较简洁(或者说简单),主要功能是:

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

先看看使用示例:

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 。另外,设置formatIgnoretrue (默认也是true)的话,会隐藏空值,就拿上面的对象来说,如果现在离目标时间还有n多天,那么会完整的显示“XX天 XX小时 XX分 XX秒”,如果是同一天,就只显示“XX小时 XX分 XX秒”。另外,{hh}{h} 的区别就在于时数小于10的时候,例如8,是显示08还是8。


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



标签: ,

无觅相关文章插件,快速提升流量