微信小程序基于數(shù)據(jù)庫時間實現(xiàn)商品倒計時功能(可重用代碼)
最近做拍賣小程序,里面有一個需求是監(jiān)控拍賣時間,需要對時間進行動態(tài)的倒計時顯示
從構(gòu)思開始,做這個倒計時也花了我4個小時多,也遇到了很多問題,現(xiàn)在我把完整的功能給實現(xiàn)了,可以拿來套用,只需要傳入你自己數(shù)據(jù)庫的時間即可。
1、第一個函數(shù)
//傳入數(shù)據(jù)庫結(jié)束時間參數(shù)并計算倒計時 countdown(endTime){//取出競拍結(jié)束時間,精確到秒,如果數(shù)據(jù)庫設(shè)置的是精確到毫秒,這里需要再除以1000 let auctionEndtime = res.data.end_time console.log(res) //獲取當前系統(tǒng)時間,默認精確到毫秒,這里要用秒,所以除以1000 var nowTime = new Date().getTime() / 1000 //剩余時間總的秒數(shù) var totalSecond = Math.floor(auctionEndtime - nowTime) console.log('剩余秒數(shù)',totalSecond) //計算倒計時 this.doCountdown(totalSecond) }
2、第二個函數(shù)
//計算商品倒計時 doCountdown(totalSecond){ let _this = this //每隔一秒執(zhí)行一次代碼,將計數(shù)器賦值給頁面變量myTime myTime = setInterval(function () { //如果競拍已經(jīng)結(jié)束 if(totalSecond < 0){ _this.setData({ clock: '' }) clearInterval(myTime) return }else{ //執(zhí)行計算 var time = _this.formatTime(totalSecond) _this.setData({ clock: time }) } totalSecond --; },1000) },
注意,需要在page()上面定義頁面全局變量myTime,以便對計數(shù)器進行清除
3、第三個函數(shù)
//倒計時時間格式化 formatTime(totalSecond){ //剩余天數(shù) var day = Math.floor(totalSecond / 3600 / 24) //n天后剩余小時數(shù) var hour = Math.floor(totalSecond /3600 % 24) //n天n小時后剩余分鐘數(shù) var min = Math.floor(totalSecond / 60 % 60) //n天n小時n分鐘后剩余秒數(shù) var sec = Math.floor(totalSecond % 60) return day + "天" + hour + "小時" + min + "分" + sec + "秒" }
4、計數(shù)器的清除
每次離開頁面需要清除計數(shù)器
到此這篇關(guān)于微信小程序基于數(shù)據(jù)庫時間實現(xiàn)商品倒計時功能(可重用代碼)的文章就介紹到這了,更多相關(guān)小程序商品倒計時內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js實現(xiàn)把時間戳轉(zhuǎn)換為yyyy-MM-dd hh:mm 格式(es6語法)
下面小編就為大家分享一篇js實現(xiàn)把時間戳轉(zhuǎn)換為yyyy-MM-dd hh:mm 格式(es6語法),具有很的參考價值,希望對大家有所幫助2017-12-12js判斷數(shù)據(jù)類型如判斷是否為數(shù)組是否為字符串等等
js判斷數(shù)據(jù)類型如判斷是否為數(shù)組類型、判斷是否為字符串類型、判斷是否為數(shù)值類型等等,本文有幾個不錯的示例,大家可以學(xué)習(xí)下2014-01-01