微信小程式實現單個或多個倒計時功能
阿新 • • 發佈:2020-11-02
微信小程式 實現單個/多個倒計時顯示
- 單個倒計時
- 多個倒計時
思路:首先獲取到每個倒計時的結束時間,然後把結束時間跟當前時間轉換成時間戳,結束時間減去當前時間再除以1000(因為時間戳是毫秒級)就是該結束時間距離當前時間的秒數了,然後根據公式計算出時分秒,最後使用定時器每秒跑一次就實現成功啦~
兩種倒計時思路差不多,多個倒計時多了遍歷陣列步驟,遍歷拿到陣列中每個物件結束時間來計算時間
好啦!說完思路先上效果圖看看
單個倒計時
上程式碼,上程式碼!!!重點來啦
wxml:
// 單個倒計時-----wxml <view class="countdown"> <view class="item"> 倒計時: <view class="txt-time">{{txtTime.hou}}</view>: <view class="txt-time">{{txtTime.min}}</view>: <view class="txt-time">{{txtTime.sec}}</view> </view> </view>
css:
// 單個倒計時-----wxss .countdown .item { display: flex; justify-content: center; align-items: center; height: 200rpx; width: 90%; margin: 0 5%; border-bottom: 2rpx solid #eee; } .countdown .item .txt-time { background-color: #6EBEC7; color: #fff; border-radius: 10rpx; font-size: 28rpx; margin: 0 4rpx; font-weight: bold; height: 42rpx; width: 66rpx; line-height: 42rpx; text-align: center; }
js:
// 單個倒計時-----js Page({ /** * 頁面的初始資料 */ data: { endTime: "2020-08-22 18:30:00",//結束時間 },//時間顯示小於10的格式化函式 timeFormat(param) { return param < 10 ? '0' + param : param; },//倒計時 singleCountDown: function () { var that = this; var time = 0; var obj = {}; var endTime = new Date(that.data.endTime.replace(/-/g,"/")).getTime();//結束時間時間戳 var currentTime = new Date().getTime();//當前時間時間戳 time = (endTime - currentTime) / 1000; // 如果活動未結束 if (time > 0) { var hou = parseInt(time / (60 * 60)); var min = parseInt(time % (60 * 60 * 24) % 3600 / 60); var sec = parseInt(time % (60 * 60 * 24) % 3600 % 60); obj = { hou: that.timeFormat(hou),min: that.timeFormat(min),sec: that.timeFormat(sec) } } else { //活動已結束 obj = { hou: "00",min: "00",sec: "00" } clearTimeout(that.data.timeIntervalSingle); //清除定時器 } var timeIntervalSingle = setTimeout(that.singleCountDown,1000); that.setData({ timeIntervalSingle,txtTime: obj,}) },/** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { this.singleCountDown();//頁面載入時就啟動定時器 },})
多個倒計時
wxml:
// 多個倒計時顯示-----wxml <view class="countdown"> <block wx:for="{{timeList}}" wx:key="index"> <view class="item"> {{item.title}}: <view class="txt-time">{{item.time.hou}}</view>: <view class="txt-time">{{item.time.min}}</view>: <view class="txt-time">{{item.time.sec}}</view> </view> </block> </view>
wxss: 跟上面單個倒計時樣式一樣,這裡就不貼出來啦!
js:
// 多個倒計時顯示-----wxml Page({ /** * 頁面的初始資料 */ data: { timeList: [{//時間陣列 title: "a倒計時",endTime: "2020-08-23 18:00:00",},{ title: "b倒計時",endTime: "2020-08-25 20:00:00",{ title: "c倒計時",endTime: "2020-08-21 20:00:00",}],//時間顯示小於10的前面補0方法 timeFormat(param) { return param < 10 ? '0' + param : param; },//多個倒計時函式 severalCountDown: function () { var that = this; var time = 0; var obj = {}; var timeList = that.data.timeList; //遍歷陣列,計算每個item的倒計時秒數 timeList.forEach(function (item) { var endTime = new Date(item.endTime.replace(/-/g,"/")).getTime();//結束時間時間戳 var currentTime = new Date().getTime();//當前時間時間戳 time = (endTime - currentTime) / 1000; // 如果活動未結束 if (time > 0) { var hou = parseInt(time / (60 * 60)); var min = parseInt(time % (60 * 60 * 24) % 3600 / 60); var sec = parseInt(time % (60 * 60 * 24) % 3600 % 60); obj = { hou: that.timeFormat(hou),sec: that.timeFormat(sec) } } else { //活動已結束 obj = { hou: "00",sec: "00" } clearTimeout(that.data.timeIntervalSeveral); //清除定時器 } item.time = obj; }) var timeIntervalSeveral = setTimeout(that.severalCountDown,1000); that.setData({ timeIntervalSeveral,timeList,/** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { this.severalCountDown();//多個定時器 },})
易錯點:結束時間轉換成時間戳時要特別特別注意把時間字串的‘-'替換成‘/',不然在ios中有報錯
溫馨提示:定時器推薦使用setTimeout(),而不推薦setinterval
好了,看到這裡單個或者多個倒計時顯示功能就實現成功啦,具體樣式可以根據自己需求修改即可。
為大家推薦現在關注度比較高的微信小程式教程一篇:《微信小程式開發教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。