js 带暂停功能的倒计时插件

最新推荐文章于 2023-08-22 16:03:42 发布

原创最新推荐文章于 2023-08-22 16:03:42 发布 · 877 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js倒计时插件 #暂停继续功能

带暂停功能的倒计时插件

settimeInterval会让倒计时延迟，因为js是单线程，会出现卡顿现象，本插件使用setTimeout优化倒计时缓慢问题

核心代码如下：

var offset = new Date().getTime() - (startTime + startCount * speed);
startCount++;
var nextTime = speed - offset;
if (nextTime < 0) nextTime = 0;
canvasTime = setTimeout(fixed, nextTime);
var start = 1.5 * Math.PI -  pauseData.increase * count;
ctx.clearRect(0, 0, canvasW, canvasH);
ctx.beginPath();
ctx.strokeStyle = pauseData.color;
ctx.closePath();
ctx.arc(60, 60, 56, start, -0.5 * Math.PI, true);
ctx.lineWidth = 3;
ctx.stroke();
if (pauseData.totalTime > 0) {
    pauseData.totalTime -= speed;
} else {
    pauseData.totalTime = 0;
}