几种倒计时的实现

1. 短信验证码---60s倒计时

// html

<h2>短信验证码</h2>
<el-button :disabled="totalTime < 60" @click="getCountdown">
{{content}}
</el-button>



// 定义常量

totalTime: 60,
content: '发送验证码',

    getCountdown() {
      const clock = window.setInterval(() => {
        this.content = this.totalTime + 's后重新发送'
        this.totalTime--
        if (this.totalTime < 0) {
          this.totalTime = 60
          this.content = '重新发送验证码'
          window.clearInterval(clock)
        }
      }, 1000)
    },

 

 

2. n秒倒计时，跳转页面

// html

<p>{{ count }}s后返回页面</p>
<el-button @click="goThreeGo">开始计时</el-button>   // 自调用或者手动计时


// data

count: '3',    // 倒计时

// 如需进入页面自动计时则注掉el-button

created() {
   this.threeGo();
}

// 3秒后进入跳转页面
    goThreeGo() {
      this.threeGo()
    },
    threeGo() {
      const TIME_COUNT = 3
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
            // 跳转的页面写在此处
            this.$router.push({
              path: ''
            })
          }
        }, 1000)
      }
    },

3. 天时分秒倒计时

// html

<h2>天时分秒倒计时</h2>
<p>倒计时：{{ day }}天 {{ hour }} : {{ min }} : {{ second }}</p>


// data

endTime: '2022-05-30 09:42:00',   //截至时间，默认从当前日期开始
day: '0',
hour: '00',
min: '00',
second: '00'

// 自调用

created() {
    this.countTime()
  },


// 时分秒倒计时
    countTime() {
      // 获取当前时间
      const date = new Date()
      const now = date.getTime()
      // 设置截止时间
      const endDate = new Date(this.endTime) // this.endTime需要倒计时的日期
      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)
      }
    }
  }