javascript 实现一个简单的带毫秒的倒计时

时间:2024-04-09 16:24:25

最近做的一个微信端小游戏,通过摇一摇获得金币,这里有一个倒计时的几秒钟时间限制,带有毫秒。

javascript 实现一个简单的带毫秒的倒计时

设计图毫秒采用小数点后三位,我觉得两位比较好看,所以改成了两位的。
实现之前,我还是先在网上搜索了一下各种实现方法,有很多,常见的都是利用日期时间对象来解决。
所以我觉得这种有些过于繁琐,毕竟这种小游戏时间单位数量级只有秒,就试着写了一种简单的方法。

https://jsfiddle.net/g35s9oy1/embedded/result,js,html,css/

这里使用了按钮触发,实际页面是检测手机摇晃触发,因此也不需要暂停、恢复, 有需要可以再添加。

思路解释一下:
1. 1000毫秒为1秒,我这里是分钟后面毫秒有两位数,所以定时器间隔时间就设为10毫秒。
2. 把时间看成是不断减少的数字,设定一个时间总数,如需要5秒,总数就为500,每隔10毫秒减少1
3. 分钟为总数除以100得到的整数,毫秒为当前总数减去分钟数乘以100.