vue倒计时案例

首先需要设定一个结束时间，将这个时间与当前时间进行对比（转为时间戳）。

用结束的时间减去开始的时间,然后把得到差值 / 1000 转化为秒数,通过秒数去分别计算出时分秒

在通过定时器让这个方法每隔一秒执行一次。具体代码如下:

<div>
    {{
      (leaveTimeHour > 10 ? leaveTimeHour : '0' + leaveTimeHour) +
      ':' +
      (leaveTimeMin > 10 ? leaveTimeMin : '0' + leaveTimeMin) +
      ':' +
      (leaveTimeSecond > 10 ? leaveTimeSecond : '0' + leaveTimeSecond)
    }}
 </div>

data () {
  return {
    endTime: '2022-08-13 00:00:00',
    // 时
    leaveTimeHour: '',
    // 分
    leaveTimeMin: '',
    // 秒
    leaveTimeSecond: '',
    // 定时器
    timer: ''
 },
methods: {
    // 清除定时器
    clearTimer () {
      clearInterval(this.timer)
      this.timer = ''
    },
    // 计算倒计时
    methodCountDown () {
      const endDate = +new Date(this.endTime)
      const now = +new Date()
      const leaveTime = (endDate - now) / 1000
      this.leaveTimeHour = parseInt(leaveTime / 60 / 62) % 24
      this.leaveTimeMin = parseInt(leaveTime / 60) % 60
      this.leaveTimeSecond = parseInt(leaveTime % 60)
      // 如果倒计时小于等于0时显示0,并清除定时器
      if (
        this.leaveTimeHour <= 0 &&
        this.leaveTimeMin <= 0 &&
        this.leaveTimeSecond <= 0
      ) {
        this.leaveTimeHour = 0
        this.leaveTimeMin = 0
        this.leaveTimeSecond = 0
        this.clearTimer()
      }
    }
  },
mounted () {
  this.methodCountDown()
  this.timer = setInterval(() => {
    this.methodCountDown()
  }, 1000)
},
// 组件销毁之前要清除定时器
beforeDestroy () {
  this.clearTimer()
}