(♥∀♥)倒计时

今天写app，里有一个倒计时，效果，代码如下

话不多说看图 相中直接拿走

template

样式就不给你了，用的quasar的内置类，给你也不一定能用

<div>{{ day }}天 {{ hour }}小时：{{ min }}：{{ second }}</div>

data定义

  data () {
    return {
      curStartTime: '2021-01-30 17:06:00', // 定义你的结束时间
      day: '00',
      hour: '00',
      min: '00',
      second: '00'
    }
  },

mounted进入页面就开始调用

mounted () {
   this.countTime()
 },

methods

  methods: {
    countTime () {
      // 获取当前时间
      const date = new Date()
      const now = date.getTime()
      // 设置截止时间
      const endDate = new Date(this.curStartTime) // this.curStartTime需要倒计时的日期
      const end = endDate.getTime()
      // 时间差
      const leftTime = end - now
      // 定义变量 d,h,m,s保存倒计时的时间
      if (leftTime >= 0) {
        // 天
        this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24)
        // 时
        const h = Math.floor((leftTime / 1000 / 60 / 60) % 24)
        this.hour = h < 10 ? '0' + h : h
        // 分
        const m = Math.floor((leftTime / 1000 / 60) % 60)
        this.min = m < 10 ? '0' + m : m
        // 秒
        const 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)
      }
    }
  }