本文實例為大家分享了微信小程序實現訂單倒計時的具體代碼，供大家參考，具體內容如下

之前在做一個有拼團功能項目的時候遇到過倒計時的問題，由于當時技術不熟在這方面耽擱了好些時間，所以這里整理出來希望能為后來人提供些許啟發。

1.實現思路

求出發起拼團時間與拼團結束時間的時間差
再將時間差格式化得到我們想要的格式如：

時間每秒遞減使用了 setTimeout(this.setTimeCount,1000);這個函數，讓這個函數每隔一秒執行一次。

效果圖：

2.實現中的難點

若是要實現單個倒計時如60s發送驗證碼倒不是很難，難的是多條倒計時。

不同的訂單下單時間是不一樣的時間差time也就不一樣，所以當初在這卡了很久，后來想通一切才覺得原來如此。

實現方法1：是后臺計算出時間前端直接獲取時間差，當時為了不影響項目進度我們用的就是這個方法，真是苦了那個些后臺的兄弟還得遷就我這個菜鳥。

獲取這個時間差time后我們就可以將它處理后放入數組循環。這樣做的好處是前端不用將time作為一個屬性添加到原數組中。

index.wxml

<view class="item">單條倒計時:{{time}}</view> <view class="item">多條倒計時</view> <view class='no'>暫無任何記錄</view> <view class="content"> <block wx:for="{{listData}}"wx:key="idx" wx:for-item="item" wx:for-index="{{idx}}">  <view class="tip {{item.time<=0?'isShow':''}}">  <view class="dis"> <view class='dis_time left'>剩余時間：{{item.countDown}}</view>  </view>  </view> </block></view>

index.wxss

page{ height:100%; background: #fff; position: relative;}.item{ height:4%; background: #fff; text-align: center;}.content{ border:1px solid rgb(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:20rpx 0; border-bottom: 1px solid gainsboro;}.isShow{ display:none;}.dis{ width:100%; font-size: 35rpx; color:#009FE5; box-sizing: border-box;}.dis_time{ width:50%;}

index.js

Page({ /** * 頁面的初始數據 */ data: { pingData: [  {  "id": "1",  "icon": "../../images/image2.jpg",  "number": "20",  "pingTime": "2019-3-28 23:30:00",  "time": "55267",  "showList": "false",  },  {  "id": "2",  "icon": "../../images/image3.jpg",  "number": "4566",  "pingTime": "2019-3-28 12:30:00",  "time": "58934",  "showList": "false",  },  {  "id": "3",  "icon": "../../images/image2.jpg",  "number": "20",  "pingTime": "2019-3-28 08:30:00",  "time": "555234",  "showList": "false",  } ], time:"30" }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { var that = this  that.setData({   listData: that.data.pingData  })  that.setCountDown();   that.setTimeCount(); }, /** * 60s倒計時 */ setTimeCount:function(){ let time=this.data.time time--; if (time <= 0) {  time = 0; } this.setData({  time:time }) setTimeout(this.setTimeCount,1000); }, /**  * 倒計時  */ setCountDown: function () { let time = 1000; let { listData } = this.data; let list = listData.map((v, i) => {  if (v.time <= 0) {  v.time = 0;  }  let formatTime = this.getFormat(v.time);  v.time -= time;  v.countDown = `${formatTime.hh}:${formatTime.mm}:${formatTime.ss}`;  return v; }) this.setData({  listData: list }); setTimeout(this.setCountDown, time); }, /** * 格式化時間 */ getFormat: function (msec) { let ss = parseInt(msec / 1000); let ms = parseInt(msec % 1000); let mm = 0; let hh = 0; if (ss > 60) {  mm = parseInt(ss / 60);  ss = parseInt(ss % 60);  if (mm > 60) {  hh = parseInt(mm / 60);  mm = parseInt(mm % 60);  } } ss = ss > 9 ? ss : `0${ss}`; mm = mm > 9 ? mm : `0${mm}`; hh = hh > 9 ? hh : `0${hh}`; return { ss, mm, hh }; }})