倒计时1.

之前在做一个有拼团功能项目的时候遇到过倒计时的问题，由于当时技术不熟在这方面耽搁了好些时间，所以这里整理出来希望能为后来人提供些许启发。1.实现思路：求出发起拼团时间与拼团结束时间的时间差再将时间差格式化得到我们想要的格式如：时间每秒递减使用了setTimeout(this.setTimeCount,1000);这个函数，让这个函数每隔一秒执行一次。效果图：2.实现中的难点若是要实现单个倒计时如60s发送验证码倒不是很难，难的是多条倒计时。不同的订单下单时间是不一样的时间差time也就不一样，所以当初在这卡了很久，后来想通一切才觉得原来如此。实现方法1：是后台计算出时间前端直接获取时间差，当时为了不影响项目进度我们用的就是这个方法，真是苦了那个些后台的兄弟还得迁就我这个菜鸟。获取这个时间差time后我们就可以将它处理后放入数组循环。这样做的好处是前端不用将time作为一个属性添加到原数组中。index.wxml

viewclass"item"单条倒计时:{{time}}/viewviewclass"item"多条倒计时/viewviewclass'no'暂无任何记录/viewviewclass"content"blockwx:for"{{listData}}"wx:key"idx"wx:for-item"item"wx:for-index"{{idx}}"viewclass"tip{{item.time0?'isShow':''}}"viewclass"dis"viewclass'dis_timeleft'剩余时间：{{item.countDown}}/view/view/view/block/view2.

index.wxss

page{height:100%;background:#fff;position:relative;}.item{height:4%;background:#fff;text-align:center;}.content{border:1pxsolidrgb(167,159,159);background:#F6F8F8;margin-bottom:300rpx;border-bottom:none;}.no{text-align:center;position:absolute;top:8%;z-index:-11;}.tip{position:relative;background:#fff;width:100%;height:100rpx;margin-bottom:5rpx;padding:20rpx0;border-bottom:1pxsolidgainsboro;}.isShow{display:none;}.dis{width:100%;font-size:35rpx;color:#009FE5;box-sizing:border-box;}.dis_time{width:50%;}3.

index.js

Page({/***页面的初始数据*/data:{pingData:[{"id":"1","icon":"../../images/image2.jpg","number":"20","pingTime":"2019-3-2823:30:00","time":"55267","showList":"false",},{"id":"2","icon":"../../images/image3.jpg","number":"4566","pingTime":"2019-3-2812:30:00","time":"58934","showList":"false",},{"id":"3","icon":"../../images/image2.jpg","number":"20","pingTime":"2019-3-2808:30:00","time":"555234","showList":"false",}],time:"30"},/***生命周期函数--监听页面加载*/onLoad:function(options){varthatthisthat.setData({listData:that.data.pingData})that.setCountDown();that.setTimeCount();},/***60s倒计时*/setTimeCount:function(){lettimethis.data.timetime--;if(time0){time0;}this.setData({time:time})setTimeout(this.setTimeCount,1000);},/***倒计时*/setCountDown:function(){lettime1000;let{listData}this.data;letlistlistData.map((v,i){if(v.time0){v.time0;}letformatTimethis.getFormat(v.time);v.time-time;v.countDown`${formatTime.hh}:${formatTime.mm}:${formatTime.ss}`;returnv;})this.setData({listData:list});setTimeout(this.setCountDown,time);},/***格式化时间*/getFormat:function(msec){letssparseInt(msec/1000);letmsparseInt(msec%1000);letmm0;lethh0;if(ss60){mmparseInt(ss/60);ssparseInt(ss%60);if(mm60){hhparseInt(mm/60);mmparseInt(mm%60);}}ssss9?ss:`0${ss}`;mmmm9?mm:`0${mm}`;hhhh9?hh:`0${hh}`;return{ss,mm,hh};}})4.

实现方法2:本着不想做菜鸟的心情，我在项目完成后由研究了下当初未完成的方法，即前端计算出时间差并将时间差数组作为原数组的属性加入循环遍历。当初一直不知如何在原数组中再添加一个数组作为它的一个属性。在之前的基础上将time时间差作为一个属性放到原数组中，关键代码如下：

varpinDatathat.data.pingDatafor(vari0;ipinData.length;i++){console.log("计算出长度为"+pinData.length)varendtimethat.data.pingData[i].pingTimeconsole.log("计算出长度为"+endtime)that.queryTime(endtime)vartime"pingData["+i+"].time"that.setData({[time]:that.queryTime(endtime),listData:pinData})}5.

新增计算时间差的方法：

queryTime:function(pintime){varstart_datenewDate();varend_datenewDate(pintime.replace(/-/g,"/"));vardaysend_date.getTime()-start_date.getTime();console.log("获取到时间差"+days)returndays;}6.

之前困惑我的地方就是如何将时间差这个数组添加到原来的数组中，现在想想思路清晰，曾经的难题也不过尔尔。index.js方法二修改后的代码

Page({/***页面的初始数据*/data:{pingData:[{"id":"1","icon":"../../images/image2.jpg","number":"20","pingTime":"2019-4-1523:30:00","time":"55267","showList":"false",},{"id":"2","icon":"../../images/image3.jpg","number":"4566","pingTime":"2019-4-1312:30:00","time":"58934","showList":"false",},{"id":"3","icon":"../../images/image2.jpg","number":"20","pingTime":"2019-4-1308:30:00","time":"555234","showList":"false",}],time:"60"},/***生命周期函数--监听页面加载*/onLoad:function(options){varthatthisvarpinDatathat.data.pingDatafor(vari0;ipinData.length;i++){console.log("计算出长度为"+pinData.length)varendtimethat.data.pingData[i].pingTimeconsole.log("计算出长度为"+endtime)that.queryTime(endtime)vartime"pingData["+i+"].time"that.setData({[time]:that.queryTime(endtime),listData:pinData})}that.setCountDown();that.setTimeCount();},/***60s倒计时*/setTimeCount:function(){lettimethis.data.timetime--;if(time0){time0;}this.setData({time:time})setTimeout(this.setTimeCount,1000);},/***倒计时*/setCountDown:function(){lettime1000;let{listData}this.data;letlistlistData.map((v,i){if(v.time0){v.time0;}letformatTimethis.getFormat(v.time);v.time-time;v.countDown`${formatTime.hh}:${formatTime.mm}:${formatTime.ss}`;returnv;})this.setData({listData:list});setTimeout(this.setCountDown,time);},/***格式化时间*/getFormat:function(msec){letssparseInt(msec/1000);letmsparseInt(msec%1000);letmm0;lethh0;if(ss60){mmparseInt(ss/60);ssparseInt(ss%60);if(mm60){hhparseInt(mm/60);mmparseInt(mm%60);}}ssss9?ss:`0${ss}`;mmmm9?mm:`0${mm}`;hhhh9?hh:`0${hh}`;return{ss,mm,hh};},queryTime:function(pintime){varstart_datenewDate();varend_datenewDate(pintime.replace(/-/g,"/"));vardaysend_date.getTime()-start_date.getTime();console.log("获取到时间差"+days)returndays;}})