计时/倒计时插件 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、网站不提供资料下载,如需下载请到原作者页面进行下载。