微信小程序倒計(jì)時(shí)

想要的效果:


image.png

wxml:

<view class='name' wx:if="{{countDown}}">
      <view class='name_left'>FENDI</view>
      <view class='name_right'>活動(dòng)結(jié)束:{{day}}天 <text>{{hou}}</text>:<text>{{min}}</text>:<text>{{sec}}</text></view>
    </view>

wxss:

.name_right{width:400rpx;font-size:24rpx;color:#F9524A;text-align:right;}
.name_right text{background:#F9524A;border-radius:6rpx;color:#fff;padding:2rpx 6rpx;}

js:

data: {
    endTime: '2018-11-22 10:40:30'//2018/11/22 10:40:30這種格式也行
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function (options) {
    var that = this;
    that.countDown()
  },
// 倒計(jì)時(shí)
  countDown:function(){
    var that=this;
    var nowTime = new Date().getTime();//現(xiàn)在時(shí)間(時(shí)間戳)
    var endTime = new Date(that.data.endTime).getTime();//結(jié)束時(shí)間(時(shí)間戳)
    var time = (endTime-nowTime)/1000;//距離結(jié)束的毫秒數(shù)
    // 獲取天、時(shí)、分、秒
    let day = parseInt(time / (60 * 60 * 24));
    let hou = parseInt(time % (60 * 60 * 24) / 3600);
    let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
    let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
    // console.log(day + "," + hou + "," + min + "," + sec)
    day = that.timeFormin(day),
    hou = that.timeFormin(hou),
    min = that.timeFormin(min),
    sec = that.timeFormin(sec)
    that.setData({
      day: that.timeFormat(day),
      hou: that.timeFormat(hou),
      min: that.timeFormat(min),
      sec: that.timeFormat(sec)
    })
    // 每1000ms刷新一次
    if (time>0){
      that.setData({
        countDown: true
      })
      setTimeout(this.countDown, 1000);
    }else{
      that.setData({
        countDown:false
      })
    }
  },
  //小于10的格式化函數(shù)(2變成02)
  timeFormat(param) {
    return param < 10 ? '0' + param : param;
  },
  //小于0的格式化函數(shù)(不會(huì)出現(xiàn)負(fù)數(shù))
  timeFormin(param) {
    return param < 0 ? 0: param;
  },

主要是,獲取當(dāng)前日期轉(zhuǎn)換為時(shí)間戳 和把結(jié)束時(shí)間轉(zhuǎn)為時(shí)間戳:

var nowTime = new Date().getTime();//現(xiàn)在時(shí)間(時(shí)間戳)
var endTime = new Date(that.data.endTime).getTime();//結(jié)束時(shí)間(時(shí)間戳)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容