当前效果体验二维码如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！效果图实现思路1.

微信小程序实现倒计时，可以将倒计时的时间进行每一秒的计算和渲染！

JS模拟商品列表数据goodsList；在onLoad周期函数中对活动结束时间进行提取；建立时间格式化函数timeFormat；建立倒计时函数countDown；在onLoad周期函数的提取结尾执行倒计时函数countDown。倒计时函数详解获取当前时间，同时得到活动结束时间数组；循环活动结束时间数组，计算每个商品活动结束时间的倒计时天、时、分、秒；用setData方法刷新数据；每个一秒执行一次倒计时函数setTimeout(this.countDown,1000)；letgoodsList[{actEndTime:'2018/05/0110:00:43'},{actEndTime:'2018/04/0111:00:00'},{actEndTime:'2018/06/0112:45:56'},{actEndTime:'2018/07/0115:00:23'},{actEndTime:'2018/05/2317:00:22'},{actEndTime:'2018/05/1419:00:44'},{actEndTime:'2018/05/2121:00:34'},{actEndTime:'2018/06/1709:00:37'},{actEndTime:'2018/03/2105:00:59'},{actEndTime:'2018/04/1907:00:48'},{actEndTime:'2018/04/2803:00:11'}]Page({data:{countDownList:[],actEndTimeList:[]},onLoad(){letendTimeList[];//将活动的结束时间参数提成一个单独的数组，方便操作goodsList.forEach(o{endTimeList.push(o.actEndTime)})this.setData({actEndTimeList:endTimeList});//执行倒计时函数this.countDown();},timeFormat(param){//小于10的格式化函数returnparam10?'0'+param:param;},countDown(){//倒计时函数//获取当前时间，同时得到活动结束时间数组letnewTimenewDate().getTime();letendTimeListthis.data.actEndTimeList;letcountDownArr[];//对结束时间进行处理渲染到页面endTimeList.forEach(o{letendTimenewDate(o).getTime();letobjnull;//如果活动未结束，对时间进行处理if(endTime-newTime0){lettime(endTime-newTime)/1000;//获取天、时、分、秒letdayparseInt(time/(60*60*24));lethouparseInt(time%(60*60*24)/3600);letminparseInt(time%(60*60*24)%3600/60);letsecparseInt(time%(60*60*24)%3600%60);obj{day:this.timeFormat(day),hou:this.timeFormat(hou),min:this.timeFormat(min),sec:this.timeFormat(sec)}}else{//活动已结束，全部设置为'00'obj{day:'00',hou:'00',min:'00',sec:'00'}}countDownArr.push(obj);})//渲染，然后每隔一秒执行一次倒计时函数this.setData({countDownList:countDownArr})setTimeout(this.countDown,1000);}})WXML2.

简单的布局和居中显示。

viewclass'tui-countdown-content'wx:for"{{countDownList}}"wx:key"countDownList"剩余textclass'tui-conutdown-box'{{item.day}}/text天textclass'tui-conutdown-box'{{item.hou}}/text时textclass'tui-conutdown-box'{{item.min}}/text分textclass'tui-conutdown-boxtui-countdown-bg'{{item.sec}}/text秒/viewWXSSpage{background-color:#eee;}.tui-countdown-content{height:50px;line-height:50px;text-align:center;background-color:#fff;margin-top:15px;padding:015px;font-size:18px;}.tui-conutdown-box{display:inline-block;height:26px;width:26px;line-height:26px;text-align:center;background-color:#000;color:#fff;margin:05px;}.tui-countdown-bg{background-color:#DF0101;}实际应用效果图3.

由于活动已结束，所以时间全部为’00’

总结4.

由于微信小程序的数据处理比HTML的更加方便快捷，所以在实现相同效果的时候需要对应的转化一下思路，可能更好的解决问题。

WXRUI体验二维码如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！下载5.

我的博客，欢迎交流！

6.

我的CSDN博客，欢迎交流！

7.

微信小程序专栏

8.

前端笔记专栏

9.

微信小程序实现部分高德地图功能的DEMO下载

10.

微信小程序实现MUI的部分效果的DEMO下载

11.

微信小程序实现MUI的GIT项目地址

12.

微信小程序实例列表

13.

前端笔记列表

14.

游戏列表