vuejs 實現24小時倒計時

DOM結構
<div class="SYtime">
                剩余
                <span class="span">{{hh}}</span>:
                <span class="span">{{mm}}</span>:
                <span class="span">{{ss}}</span>自動結束
            </div>

 

vue代碼結構

data(){
return{
      hh: '00',
      mm: '00',
      ss: '00',
      flag: false,
}
}
mounted () {
    let time = setInterval(() => {
      if (this.flag == true) {
        clearInterval(time)
      }
      this.timeDown()
    }, 500)
  },
methods:{
  timeDown () {
      const endTime = new Date(this.beginTime).getTime() + 24 * 60 * 60 * 1000;
      const nowTime = new Date(this.beginTime);
      var date = new Date();
      var now = date.getTime(nowTime);
      //設置截止時間
      var endDate = new Date(endTime);
      var end = endDate.getTime();
      //時間差
      var rightTime = end - now;//截止時間減去當前時間
      if (rightTime > 0) {//判斷剩余倒計時時間如果大於0就執行倒計時否則就結束
        // var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
        var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
        var mm = Math.floor((rightTime / 1000 / 60) % 60);
        var ss = Math.floor((rightTime / 1000) % 60);
        this.hh = hh;
        this.mm = mm;
        this.ss = ss;
      } else {
        this.isfail = true;
      }
    },
}