本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)訂單倒計(jì)時(shí)的具體代碼，供大家參考，具體內(nèi)容如下
之前在做一個(gè)有拼團(tuán)功能項(xiàng)目的時(shí)候遇到過(guò)倒計(jì)時(shí)的問(wèn)題，由于當(dāng)時(shí)技術(shù)不熟在這方面耽擱了好些時(shí)間，所以這里整理出來(lái)希望能為后來(lái)人提供些許啟發(fā)。
1.實(shí)現(xiàn)思路
求出發(fā)起拼團(tuán)時(shí)間與拼團(tuán)結(jié)束時(shí)間的時(shí)間差
再將時(shí)間差格式化得到我們想要的格式如：
時(shí)間每秒遞減使用了 setTimeout(this.setTimeCount,1000);這個(gè)函數(shù)，讓這個(gè)函數(shù)每隔一秒執(zhí)行一次。
效果圖：
2.實(shí)現(xiàn)中的難點(diǎn)
若是要實(shí)現(xiàn)單個(gè)倒計(jì)時(shí)如60s發(fā)送驗(yàn)證碼倒不是很難，難的是多條倒計(jì)時(shí)。
不同的訂單下單時(shí)間是不一樣的時(shí)間差time也就不一樣，所以當(dāng)初在這卡了很久，后來(lái)想通一切才覺(jué)得原來(lái)如此。
實(shí)現(xiàn)方法1：是后臺(tái)計(jì)算出時(shí)間前端直接獲取時(shí)間差，當(dāng)時(shí)為了不影響項(xiàng)目進(jìn)度我們用的就是這個(gè)方法，真是苦了那個(gè)些后臺(tái)的兄弟還得遷就我這個(gè)菜鳥(niǎo)。
獲取這個(gè)時(shí)間差time后我們就可以將它處理后放入數(shù)組循環(huán)。這樣做的好處是前端不用將time作為一個(gè)屬性添加到原數(shù)組中。
index.wxml
<view class="item">單條倒計(jì)時(shí):{{time}}</view> <view class="item">多條倒計(jì)時(shí)</view> <view class='no'>暫無(wú)任何記錄</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'>剩余時(shí)間：{{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({ /** * 頁(yè)面的初始數(shù)據(jù) */ 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" }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 */ onLoad: function (options) { var that = this that.setData({ listData: that.data.pingData }) that.setCountDown(); that.setTimeCount(); }, /** * 60s倒計(jì)時(shí) */ setTimeCount:function(){ let time=this.data.time time--; if (time <= 0) { time = 0; } this.setData({ time:time }) setTimeout(this.setTimeCount,1000); }, /** * 倒計(jì)時(shí) */ 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); }, /** * 格式化時(shí)間 */ 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 }; }})實(shí)現(xiàn)方法2：本著不想做菜鳥(niǎo)的心情，我在項(xiàng)目完成后由研究了下當(dāng)初未完成的方法，即前端計(jì)算出時(shí)間差并將時(shí)間差數(shù)組作為原數(shù)組的屬性加入循環(huán)遍歷。當(dāng)初一直不知如何在原數(shù)組中再添加一個(gè)數(shù)組作為它的一個(gè)屬性。
在之前的基礎(chǔ)上將time時(shí)間差作為一個(gè)屬性放到原數(shù)組中
關(guān)鍵代碼如下：
var pinData = that.data.pingData for (var i = 0; i < pinData.length;i++){ console.log("計(jì)算出長(zhǎng)度為" + pinData.length) var endtime = that.data.pingData[i].pingTime console.log("計(jì)算出長(zhǎng)度為" + endtime) that.queryTime(endtime) var time ="pingData["+i+"].time" that.setData({ [time]:that.queryTime(endtime), listData:pinData }) }新增計(jì)算時(shí)間差的方法：
queryTime:function(pintime){ var start_date = new Date(); var end_date = new Date(pintime.replace(/-/g, "/")); var days = end_date.getTime() - start_date.getTime(); console.log("獲取到時(shí)間差" + days) return days; }之前困惑我的地方就是如何將時(shí)間差這個(gè)數(shù)組添加到原來(lái)的數(shù)組中，現(xiàn)在想想思路清晰，曾經(jīng)的難題也不過(guò)爾爾。
index.js方法二修改后的代碼
Page({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { pingData: [ { "id": "1", "icon": "../../images/image2.jpg", "number": "20", "pingTime": "2019-4-15 23:30:00", "time": "55267", "showList": "false", }, { "id": "2", "icon": "../../images/image3.jpg", "number": "4566", "pingTime": "2019-4-13 12:30:00", "time": "58934", "showList": "false", }, { "id": "3", "icon": "../../images/image2.jpg", "number": "20", "pingTime": "2019-4-13 08:30:00", "time": "555234", "showList": "false", } ], time:"60" }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 */ onLoad: function (options) { var that = this var pinData = that.data.pingData for (var i = 0; i < pinData.length;i++){ console.log("計(jì)算出長(zhǎng)度為" + pinData.length) var endtime = that.data.pingData[i].pingTime console.log("計(jì)算出長(zhǎng)度為" + endtime) that.queryTime(endtime) var time ="pingData["+i+"].time" that.setData({ [time]:that.queryTime(endtime), listData:pinData }) } that.setCountDown(); that.setTimeCount(); }, /** * 60s倒計(jì)時(shí) */ setTimeCount:function(){ let time=this.data.time time--; if (time <= 0) { time = 0; } this.setData({ time:time }) setTimeout(this.setTimeCount,1000); }, /** * 倒計(jì)時(shí) */ 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); }, /** * 格式化時(shí)間 */ 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 }; }, queryTime:function(pintime){ var start_date = new Date(); var end_date = new Date(pintime.replace(/-/g, "/")); var days = end_date.getTime() - start_date.getTime(); console.log("獲取到時(shí)間差" + days) return days; }})以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
