微信小程式設定倒計時效果
阿新 • • 發佈:2018-11-12
效果
微信小程式設定倒計時步驟
1.設定一個定時器,然後將時間設為一秒
2.在這個函式裡將當前時間距終止的時間,的時間戳的差值減一
3.計算剩餘的時間,還剩的時分秒等
4.將計算的時間儲存到data中
坑
一定要計算後的結果,一定要儲存,不然倒計時沒有效果
話不多說,上程式碼
Page({ data: { intervarID: '',//定時器名字 time_diff:0,//時間差 day: 0,//天 hourse: 0,//小時 minute: 0,//分 second: 0,//秒 }, //定時器 countDown: function () { var that = this; var now_time = that.data.time_diff;//獲取時間差 this.data.intervarID = setInterval(function () {//設定定時器 //將時間差減一秒 now_time--; //計算天時分秒 let d = Math.floor((now_time - (now_time % 86400)) / 86400); let h = Math.floor((now_time % 86400) / 3600); let m = Math.floor((now_time % 3600) / 60); let s = now_time % 60; //將計算結果儲存至data that.setData({ day: d, hourse: h, minute: m, second: s, }); //當時間差為0時,清除定時器 if (d <= 0 && h <= 0 && m <= 0 && s <= 0) { clearInterval(that.data.intervarID); } }, 1000 ) }, /** * 生命週期函式--監聽頁面顯示 */ onShow: function () { //定時器開始 this. countDown(); }, )