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

思路

我之前在掘金上看到，有小天才的想法直接在倒计时的后面加一个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 就可以了。