微信小程序實現團購或秒殺批量倒計時

2020-03-21 16:15:03

字體：大中小

來源：轉載

供稿：網友

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

效果圖

微信小程序,團購,秒殺,倒計時

實現思路

微信小程序實現倒計時，可以將倒計時的時間進行每一秒的計算和渲染！

模擬商品列表數據 goodsList；
在 onLoad 周期函數中對活動結束時間進行提取；
建立時間格式化函數 timeFormat；
建立倒計時函數 countDown；
在 onLoad 周期函數的提取結尾執行倒計時函數 countDown。

倒計時函數詳解

獲取當前時間，同時得到活動結束時間數組；
循環活動結束時間數組，計算每個商品活動結束時間的倒計時天、時、分、秒；
用 setData 方法刷新數據；
每個一秒執行一次倒計時函數 setTimeout(this.countDown,1000)；

let goodsList = [ {actEndTime: '2018-05-01 10:00:43'}, {actEndTime: '2018-04-01 11:00:00'}, {actEndTime: '2018-06-01 12:45:56'}, {actEndTime: '2018-07-01 15:00:23'}, {actEndTime: '2018-05-23 17:00:22'}, {actEndTime: '2018-05-14 19:00:44'}, {actEndTime: '2018-05-21 21:00:34'}, {actEndTime: '2018-06-17 09:00:37'}, {actEndTime: '2018-03-21 05:00:59'}, {actEndTime: '2018-04-19 07:00:48'}, {actEndTime: '2018-04-28 03:00:11'}]Page({ data: { countDownList: [], actEndTimeList: [] }, onLoad(){ let endTimeList = []; // 將活動的結束時間參數提成一個單獨的數組，方便操作 goodsList.forEach(o => {endTimeList.push(o.actEndTime)}) this.setData({ actEndTimeList: endTimeList}); // 執行倒計時函數 this.countDown(); }, timeFormat(param){//小于10的格式化函數 return param < 10 ? '0' + param : param;  }, countDown(){//倒計時函數 // 獲取當前時間，同時得到活動結束時間數組 let newTime = new Date().getTime(); let endTimeList = this.data.actEndTimeList; let countDownArr = []; // 對結束時間進行處理渲染到頁面 endTimeList.forEach(o => {  let endTime = new Date(o).getTime();  let obj = null;  // 如果活動未結束，對時間進行處理  if (endTime - newTime > 0){  let time = (endTime - newTime) / 1000;  // 獲取天、時、分、秒  let day = parseInt(time / (60 * 60 * 24));  let hou = parseInt(time % (60 * 60 * 24) / 3600);  let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);  let sec = parseInt(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); }})

WXML

簡單的布局和居中顯示。

<view class='tui-countdown-content' wx:for="{{countDownList}}" wx:key="countDownList"> 剩余 <text class='tui-conutdown-box'>{{item.day}}</text>天 <text class='tui-conutdown-box'>{{item.hou}}</text>時 <text class='tui-conutdown-box'>{{item.min}}</text>分 <text class='tui-conutdown-box tui-countdown-bg'>{{item.sec}}</text>秒</view>

WXSS

page{background-color: #eee;}.tui-countdown-content{ height: 50px; line-height: 50px; text-align: center; background-color: #fff; margin-top: 15px; padding: 0 15px; 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: 0 5px;}.tui-countdown-bg{ background-color: #DF0101;}

實際應用效果圖

由于活動已結束，所以時間全部為'00'

微信小程序,團購,秒殺,倒計時