vue五分钟倒计时

效果：

image.png
image.png

源码：

// 时分秒显示
<view class="time">
  剩余支付时间：<text>{{ hr }}:{{min}}:{{sec}}</text>
</view>

// 时分秒 每个分位值   分开显示
<view>
  <text class="num">{{ Math.floor( hr / 10 )}}</text><text class="num marr">{{ Math.floor( hr % 10 )}}</text>:
  <text class="num marl">{{ Math.floor( min / 10 )}}</text><text class="num marr">{{ min % 10 }}</text>:
  <text class="num marl">{{ Math.floor( sec / 10 )}}</text><text class="num">{{ sec % 10 }}</text>
</view>

data() {
  return:{
    showTime: false,
    day: '',
    hr: '',
    min: '',
    sec: ''
  }
},
onshow() {
  this.endTime = Date.parse(new Date('2021-07-01 17:32:00 ')) // 截止时间为固定值
  this.endTime = Date.parse(new Date()) + 300000 // 截止时间为5分钟（当前时间的五分钟后,1min为60000ms,5min故为300000ms,当前时间的时间戳加上毫秒数）
  this.countdownPay ()
},
methods: {
            // 支付倒计时
        countdownPay () {
             const end = this.endTime
             const now = Date.parse(new Date())
             const msec = end - now
             if(msec<0) return;
             let day = parseInt(msec / 1000 / 60 / 60 / 24)
             let hr = parseInt(msec / 1000 / 60 / 60 % 24)
             let min = parseInt(msec / 1000 / 60 % 60)
             let sec = parseInt(msec / 1000 % 60)
             this.day = day
             this.hr = hr > 9 ? hr : '0' + hr
             this.min = min > 9 ? min : '0' + min
             this.sec = sec > 9 ? sec : '0' + sec
             const that = this
             if(min>=0 && sec>=0){
                //倒计时结束关闭支付
                if(min==0 && sec==0){
                    that.showTime = false
                  return
                }
                setTimeout(function () {
                  that.countdownPay()
                }, 1000)
            }
        },
}