如何在前端编写一个精确到毫秒的倒计时

思路

我之前在掘金上看到，有小天才的想法直接在倒计时的后面加一个gif。反正都看不清楚，所以只需要有个gif在固定的位置不停的播放就可以达到毫秒倒计时的效果。
真是小天才，我也是第一次看到竟然有这种解决途径，原本我们的前端找设计师要了一个gif，奈何倒计时的gif图片效果确实很差，模糊加上字体大小不等，一眼看过去就很拙劣。
解决方式其实非常简单，已在线上项目中时候，且效果非常好，并且并不会过多的消耗性能。秘密就在于欺骗眼睛。在真实的倒计时环境中，我们的眼睛并不能看到每一帧的图片，也就是1000毫秒 1000张图片。眼睛实际上只能看到30~60帧（当然个体情况不同，肯定会出现误差）。所以核心思想就是，把这个1秒的时间段，拆分成21个关键帧解决。1/21 2/21 3/21 4/21。。。以此类推。我们就得出一个数组
[“000”, “048”, “095”, “143”, “190”, “238”, “286”, “333”, “381”, “429”, “476”, “524”, “571”, “619”, “667”, “714”, “762”, “810”, “857”, “905”, “952”]。在实现倒计时的时候只需要循环1/21秒的时候循环播放这个数组里面的列表。使用另外一个定时器，用来控制秒数的倒计时，也就是倒计时的秒位数部分。另外在倒计时结束的之后，由于可能出现的代码执行上的时间差，会导致毫秒的这个不为000。只需要在秒数倒计时结束之后直接将毫秒部分的数值重置为000 就可以了。

最后

以上就是超帅便当为你收集整理的如何在前端编写一个精确到毫秒的倒计时的全部内容，希望文章能够帮你解决如何在前端编写一个精确到毫秒的倒计时所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。