最近做拍賣小程式,裡面有一個需求是監控拍賣時間,需要對時間進行動態的倒計時顯示 從構思開始,做這個倒計時也花了我4個小時多,也遇到了很多問題,現在我把完整的功能給實現了,可以拿來套用,只需要傳入你自己資料庫的時間即可。 1、第一個函數 //傳入資料庫結束時間參數並計算倒計時 countdown(en ...
最近做拍賣小程式,裡面有一個需求是監控拍賣時間,需要對時間進行動態的倒計時顯示
從構思開始,做這個倒計時也花了我4個小時多,也遇到了很多問題,現在我把完整的功能給實現了,可以拿來套用,只需要傳入你自己資料庫的時間即可。
1、第一個函數
//傳入資料庫結束時間參數並計算倒計時 countdown(endTime){//取出競拍結束時間,精確到秒,如果資料庫設置的是精確到毫秒,這裡需要再除以1000 let auctionEndtime = res.data.end_time console.log(res) //獲取當前系統時間,預設精確到毫秒,這裡要用秒,所以除以1000 var nowTime = new Date().getTime() / 1000 //剩餘時間總的秒數 var totalSecond = Math.floor(auctionEndtime - nowTime) console.log('剩餘秒數',totalSecond) //計算倒計時 this.doCountdown(totalSecond) }
2、第二個函數
//計算商品倒計時 doCountdown(totalSecond){ let _this = this //每隔一秒執行一次代碼,將計數器賦值給頁面變數myTime myTime = setInterval(function () { //如果競拍已經結束 if(totalSecond < 0){ _this.setData({ clock: '' }) clearInterval(myTime) return }else{ //執行計算 var time = _this.formatTime(totalSecond) _this.setData({ clock: time }) } totalSecond --; },1000) },
註意,需要在page()上面定義頁面全局變數myTime,以便對計數器進行清除
3、第三個函數
//倒計時時間格式化 formatTime(totalSecond){ //剩餘天數 var day = Math.floor(totalSecond / 3600 / 24) //n天後剩餘小時數 var hour = Math.floor(totalSecond /3600 % 24) //n天n小時後剩餘分鐘數 var min = Math.floor(totalSecond / 60 % 60) //n天n小時n分鐘後剩餘秒數 var sec = Math.floor(totalSecond % 60) return day + "天" + hour + "小時" + min + "分" + sec + "秒" }
4、計數器的清除
每次離開頁面需要清除計數器