使用 tictac.js 实现倒计时
2014-06-27 · 1,083 chars · 6 min read
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 () { //.... }, })
下面具体讲一下怎么用:
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 是应项目而生的,可能适用的场景不是很广,也不够严密(类型判断之类的都没有做),加上这类型的代码比较简单,需求多样,难以组件化(想了很久),所以就直接按现有的功能放出来分享。**源码里注释比较多,大家有什么需要可以直接改,不清楚的地方也可以直接看源码,也欢迎交流。**