快捷導(dǎo)航

微信小程序基于數(shù)據(jù)庫時間實現(xiàn)商品倒計時功能(可重用代碼)

更新時間：2022年07月23日 11:14:11 作者：小李不背鍋

這篇文章主要介紹了微信小程序基于數(shù)據(jù)庫時間實現(xiàn)商品倒計時功能(可重用代碼),代碼很完整，拿來就可以使用，現(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)
        //獲取當(dāng)前系統(tǒng)時間,默認(rèn)精確到毫秒，這里要用秒，所以除以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ù)器