计时/倒计时插件 Timer/Countdown plugi

计时器/倒计时插件

示例

介绍

使用requestAnimationFrame替代传统的setTimeout setInterval 实现计时与倒计时功能。

原理

当函数初始化时,记录下此时的Date.now() ,通过requestAnimationFrame实现浏览器在渲染时的每一帧,运算一次此时的Date.now(),并与初始时间的相加减得到具体的差值,从而实现精确计算。

使用方法

new Timer(el) // el 即为放置计时器的 Dom 容器

也可自定义相关配置如下

var timer = new Timer(el, { startTime: 0, // { Number } 初始时间 默认: 0 isTimer: true, // { Boolean } 计时:true 倒计时:false 默认: true type: 's', // { String } 渲染类型 默认: s // d:天;h:小时;m:分钟;s:秒;ss:毫秒 // 使用 / 号隔断; 如: [小时:分钟:秒] => [h/m/s] })

由于使用了requestAnimationFrame 所以在全局下会有一个动画帧请求,可以通过此方法取消掉。

timer.destory()

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。