vue2 实现倒计时两种方法（普通和van-count-down）

<template>
  <div>
    <!--倒计时-->
    <div class="count-down">
      <van-count-down :time="time">
        <template #default="timeData">
          <span class="block1"> {{ ('0' + timeData.days).slice(-2) }} </span>
          <span class="colon">:</span>
          <span class="block2">{{ ('0' + timeData.hours).slice(-2) }}</span>
          <span class="colon">:</span>
          <span class="block3">{{ ('0' + timeData.minutes).slice(-2) }}</span>
          <span class="colon">:</span>
          <span class="block4">{{ ('0' + timeData.seconds).slice(-2) }}</span>
        </template>
      </van-count-down>
    </div>
    倒数日剩余：{{ day }}: {{ hour }}:{{ min }}:{{ second }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 设置截止时间
      curStartTime: '2024-12-21 23:59:59',
      day: '0',
      hour: '00',
      min: '00',
      second: '00',
      time: 0
    }
  },

  mounted() {
    this.countTime()
  },
  methods: {
    countTime() {
      // 获取当前时间
      let date = new Date()
      let now = date.getTime()

      // 设置截止时间
      let endDate = new Date(this.curStartTime) // this.curStartTime需要倒计时的日期
      let end = endDate.getTime()

      // 时间差
      let leftTime = end - now
      console.log('000', leftTime)
      this.time = leftTime

      // 定义变量 day,h,m,s保存倒计时的时间
      if (leftTime >= 0) {
        // 天
        //   this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24)
        let d = Math.floor(leftTime / 1000 / 60 / 60 / 24)
        this.day = d < 10 ? '0' + d : d
        // 时
        let h = Math.floor((leftTime / 1000 / 60 / 60) % 24)
        this.hour = h < 10 ? '0' + h : h
        // 分
        let m = Math.floor((leftTime / 1000 / 60) % 60)
        this.min = m < 10 ? '0' + m : m
        // 秒
        let s = Math.floor((leftTime / 1000) % 60)
        this.second = s < 10 ? '0' + s : s
      } else {
        this.day = 0
        this.hour = '00'
        this.min = '00'
        this.second = '00'
      }
      // 等于0的时候不调用
      if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
        return
      } else {
        // 递归每秒调用countTime方法，显示动态时间效果,
        setTimeout(this.countTime, 1000)
      }
    }
  }
}
</script>