vue 倒计时

vue项目中倒计时功能

<template>
  <div>
    <p>倒计时</p>
    <p>{{day}}天{{hour}}时{{minute}}分{{seconds}}秒</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      day: '',
      hour: '',
      minute: '',
      seconds: ''
    }
  },
  methods: {
    countTime () {
      // 获取当前时间
      var date = new Date()
      var now = date.getTime()
      // 设置截止时间
      // 如果是移动端 2021-9-17 ios不兼容  2021/9/17
      var endDate = new Date("2021-9-17 15:58:00")
      var end = endDate.getTime()
      // 时间差
      var leftTime = end-now
      // 定义变量 h,m,s保存倒计时的时间
      var h, m, s
      if (leftTime >= 0) {
        this.day = Math.floor(leftTime/1000/60/60/24)
        h = Math.floor(leftTime/1000/60/60%24)
        this.hour = h <10? '0'+h : h
        m = Math.floor(leftTime/1000/60%60)
        this.minute = m <10? '0'+m : m
        s = Math.floor(leftTime/1000%60)
        this.seconds = s <10? '0'+s : s
        this.isEnd = false
      } else {
        this.day = '0'
        this.hour = '00'
        this.minute = '00'
        this.seconds = '00'
        this.isEnd = true
      }
      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>