小程序倒计时的制作-倒计时小程序发群-小程序倒计时功能-即速应用

小程序倒计时的制作-倒计时小程序发群-小程序倒计时功能

浏览量：3495 时间：2020-04-06 来源：HuPanIT

小程序（倒计时的制作）1.
微信小程序如火如荼，今天我借教程做一篇倒计时效果的小程序页面.
2.
这样的效果是怎样实现的呢
3.
按以下步骤操作
4.
wxml文件放个text:
viewtext{{second}}秒:{{micro_second}}/text/view5.
然后在js文件下编写如下代码：
functioncountdown(that){varsecondthat.data.secondif(second0){//console.log("时间到...");that.setData({second:"TimeOut..."});return;}vartimesetTimeout(function(){that.setData({second:second-1});countdown(that);},1000)}6.
在Page里面加入：
second:3,7.
在onLoad加载函数里面执行倒计时函数：
countdown(this);8.
最终效果如图：
9.
加入毫秒demo
10.
更改js代码：
functioncountdown(that){varsecondthat.data.secondif(second0){that.setData({second:"时间到!",micro_second:"",s:0});clearTimeout(micro_timer);return;}vartimersetTimeout(function(){that.setData({second:second-1});countdown(that);},1000)}/*毫秒级倒计时*///初始毫秒数，同时用作归零varmicro_second_init100;//当前毫秒数varmicro_second_currentmicro_second_init;//毫秒计时器varmicro_timer;functioncountdown4micro(that){if(micro_second_current0){micro_second_currentmicro_second_init;}micro_timersetTimeout(function(){that.setData({micro_second:micro_second_current-1});micro_second_current--;countdown4micro(that);},10)}11.
在onload函数如加入上述的两个计时函数：
countdown(this);countdown4micro(this);12.
最终效果：