微信小程序基于數(shù)據(jù)庫時(shí)間實(shí)現(xiàn)商品倒計(jì)時(shí)功能(可重用代碼)
最近做拍賣小程序,里面有一個(gè)需求是監(jiān)控拍賣時(shí)間,需要對(duì)時(shí)間進(jìn)行動(dòng)態(tài)的倒計(jì)時(shí)顯示
從構(gòu)思開始,做這個(gè)倒計(jì)時(shí)也花了我4個(gè)小時(shí)多,也遇到了很多問題,現(xiàn)在我把完整的功能給實(shí)現(xiàn)了,可以拿來套用,只需要傳入你自己數(shù)據(jù)庫的時(shí)間即可。
1、第一個(gè)函數(shù)
//傳入數(shù)據(jù)庫結(jié)束時(shí)間參數(shù)并計(jì)算倒計(jì)時(shí)
countdown(endTime){//取出競(jìng)拍結(jié)束時(shí)間,精確到秒,如果數(shù)據(jù)庫設(shè)置的是精確到毫秒,這里需要再除以1000
let auctionEndtime = res.data.end_time
console.log(res)
//獲取當(dāng)前系統(tǒng)時(shí)間,默認(rèn)精確到毫秒,這里要用秒,所以除以1000
var nowTime = new Date().getTime() / 1000
//剩余時(shí)間總的秒數(shù)
var totalSecond = Math.floor(auctionEndtime - nowTime)
console.log('剩余秒數(shù)',totalSecond)
//計(jì)算倒計(jì)時(shí)
this.doCountdown(totalSecond)
}2、第二個(gè)函數(shù)
//計(jì)算商品倒計(jì)時(shí)
doCountdown(totalSecond){
let _this = this
//每隔一秒執(zhí)行一次代碼,將計(jì)數(shù)器賦值給頁面變量myTime
myTime = setInterval(function () {
//如果競(jìng)拍已經(jīng)結(jié)束
if(totalSecond < 0){
_this.setData({
clock: ''
})
clearInterval(myTime)
return
}else{
//執(zhí)行計(jì)算
var time = _this.formatTime(totalSecond)
_this.setData({
clock: time
})
}
totalSecond --;
},1000)
},注意,需要在page()上面定義頁面全局變量myTime,以便對(duì)計(jì)數(shù)器進(jìn)行清除

3、第三個(gè)函數(shù)
//倒計(jì)時(shí)時(shí)間格式化
formatTime(totalSecond){
//剩余天數(shù)
var day = Math.floor(totalSecond / 3600 / 24)
//n天后剩余小時(shí)數(shù)
var hour = Math.floor(totalSecond /3600 % 24)
//n天n小時(shí)后剩余分鐘數(shù)
var min = Math.floor(totalSecond / 60 % 60)
//n天n小時(shí)n分鐘后剩余秒數(shù)
var sec = Math.floor(totalSecond % 60)
return day + "天" + hour + "小時(shí)" + min + "分" + sec + "秒"
}4、計(jì)數(shù)器的清除
每次離開頁面需要清除計(jì)數(shù)器

到此這篇關(guān)于微信小程序基于數(shù)據(jù)庫時(shí)間實(shí)現(xiàn)商品倒計(jì)時(shí)功能(可重用代碼)的文章就介紹到這了,更多相關(guān)小程序商品倒計(jì)時(shí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實(shí)現(xiàn)下拉列表選擇框
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)下拉列表選擇框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10
老生常談js動(dòng)態(tài)添加事件--- 事件委托
下面小編就為大家?guī)硪黄仙U刯s動(dòng)態(tài)添加事件--- 事件委托。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
javascript定義類和類的實(shí)現(xiàn)實(shí)例詳解
這篇文章主要介紹了javascript定義類和類的實(shí)現(xiàn),結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript類的定義方式與相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
js實(shí)現(xiàn)把時(shí)間戳轉(zhuǎn)換為yyyy-MM-dd hh:mm 格式(es6語法)
下面小編就為大家分享一篇js實(shí)現(xiàn)把時(shí)間戳轉(zhuǎn)換為yyyy-MM-dd hh:mm 格式(es6語法),具有很的參考價(jià)值,希望對(duì)大家有所幫助2017-12-12
js判斷數(shù)據(jù)類型如判斷是否為數(shù)組是否為字符串等等
js判斷數(shù)據(jù)類型如判斷是否為數(shù)組類型、判斷是否為字符串類型、判斷是否為數(shù)值類型等等,本文有幾個(gè)不錯(cuò)的示例,大家可以學(xué)習(xí)下2014-01-01

