vue 中计时器

简单计时器

 webviewTimer( ) {
            this.timeOut = setTimeout(() => {
                        this.webviewTimer()
                    }, 2000)
            },
清除计时器
  clearTimeout(this.timeOut)//清除计时器

//倒计时  n天n时n分n秒
html中

   <span>{{promoStatus==1?'距开始':promoStatus==2?'距结束':''}}{{timeObj.Day}}天</span>
                            <span class="time">{{timeObj.MDS[0]}}</span>:
                            <span class="time">{{timeObj.MDS[1]}}</span>:
                            <span class="time">{{timeObj.MDS[2]}}</span>

js中


this.diffTime = endTime - nowTime;
checkOrderExpiredTime( ) {
    const diffTime = this.diffTime
    if (diffTime > 0) {
        this.timeOut = setTimeout(() => {
            this.diffTime = diffTime - 1000
            this.timeObj = this.$$.toDDHHmmss(this.diffTime)
            this.checkOrderExpiredTime()
        }, 1000)
    }else{
      clearTimeout(this.timeOut)//清除计时器
     } 
},

data中定义  timeObj

export default {
    data(){
        return{
            timeObj:{
                Day:'0',
                MDS: ['00','00','00']
            },
            diffTime:"",
        }
    },






toDDHHmmss公用方法的封装

const toDDHHmmss = (mss) =>{
  let days = parseInt(mss / (1000 * 60 * 60 * 24));
  let hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = parseInt((mss % (1000 * 60)) / 1000);
  return {
   Day: days,
   MDS: [String(hours).padStart(2, 0), String(minutes).padStart(2, 0), String(seconds).padStart(2, 0)]
  };
}