vue中使用JS實現倒計時功能

一、倒計時功能

將剩余的時間顯示出來，反饋給用戶，每過1s，剩余的時間也減少1s

二、html中

<div style="position: fixed; top: 0; right:0; color:red">
        <span class="el-icon-time">{{ timeDay }}m{{ time }}s</span>
</div>

三、javascript中

//vue的data      
  data() {
    return {
      newTime: '2020-9-21 16:12:00',
      timeOut: '',
      timeSave: '',
      time: '',
      timeDay: ''
    }
  }

//method中的方法
setTime() {
      this.timeOut = setInterval(() => {
        setTimeout(() => {
          //newtime是倒計時的結束時間，當前時間和newTime指定的時間相同時，倒計時為0，即倒計時結束
          const timedate = new Date(this.newTime)
          const now = new Date()
          const date = timedate.getTime() - now.getTime()
          const time = Math.ceil(date / 1000) % 60
          const timeDay = Math.ceil(date / (1000 * 60)) - 1
          this.time = time > 0 ? time : 0
          this.timeDay = timeDay > 0 ? timeDay : 0
        }, 0)
      }, 1000)
    },