微信小程序教程-倒计时组件实现代码

功能: 适用于电商应用的限时团购、商品秒杀等

先来看下最终效果：

文章插图
分步骤-性子急的朋友，可以直接看最后那段代码。
wxml文件放个text
second: {{second}} micro second:{{micro_second}}

在js文件中调用

文章插图
运行验证下，从10走到1s ，然后显示时间到。
于是继续将毫秒完善，注意毫秒的步长受限于系统的时间频率，于是我们精确到0.01s即10ms
js

文章插图
wxml文件

文章插图
如此，当秒级运行完毕时，毫秒级timer即clearTimeout ，并将字本显示为'micro_second too'
再添加一个countdown4micro方法，使得显示剩余 0:3:19 89这样形式的倒数

文章插图
如此这般，毫秒与时分秒是分别运行渲染的，再次改造，程序可读性更好。dateformat针对于毫秒操作，而不接受秒为数。同时还省却了计算100次为1s的运算

文章插图
【微信小程序教程-倒计时组件实现代码】经过如上优化，代码量减少一半，运行效率也高了。