您所在的位置: 下载吧  >  软件教程  >  安卓使用教程  >  应用管理 > 正文

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

  • 时间:2017-01-04 17:36
  • 来源:下载吧
  • 编辑:xusuwen

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

先来看下最终效果:

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

分步骤-性子急的朋友,可以直接看最后那段代码。

wxml文件放个text

<text>second: {{second}} micro second:{{micro_second}}</text>

在js文件中调用

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

运行验证下,从10走到1s,然后显示时间到。

于是继续将毫秒完善,注意毫秒的步长受限于系统的时间频率,于是我们精确到0.01s即10ms

js

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

wxml文件

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

如此,当秒级运行完毕时,毫秒级timer即clearTimeout,并将字本显示为'micro_second too'

再添加一个countdown4micro方法,使得显示剩余 0:3:19 89这样形式的倒数

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

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

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

经过如上优化,代码量减少一半,运行效率也高了。

人气排行