vue获取验证码倒计时

此方法获取验证码倒计时一分钟，刷新页面不清0，主要利用本地存储，延时器，递归实现

<el-button :disabled="!BtnStatus" @click="validateBtn">{{BtnStatus ? '获取验证码' : `${countDownTime}秒后获取`}}</el-button>

 

data() {
    return {
        BtnStatus: true,
        countDownTime: 60
  }
}

每次页面重新加载即刷新页面的时候，都从本地存储里获取存的时间戳，如果有的话，调用方法

 1   created() {
 2     let myEndTime = localStorage.getItem('myEndTime')
 3     myEndTime && this.codeCountDown(myEndTime)
11   },

点击获取验证码的时候

1 // 点击的时候利用本地存储存时间
2     validateBtn() {
3       let endMsRes = new Date().getTime() + 60000                   //当前时间戳加上一分钟的时间戳，相当于当前时间一分钟以后的时间戳
4       localStorage.setItem('myEndTime', JSON.stringify(endMsRes))   // 把这个一分钟时候的事件戳存起来
6       this.codeCountDown(endMsRes)                                  // 调用封装的方法
7     }

秒和毫秒是  1 = 1000

 1     codeCountDown(endMsRes) {
 2       this.BtnStatus = false
 3       this.countDownTime = Math.ceil((endMsRes - new Date().getTime()) / 1000)    //剩余多少秒
 4       let time = setTimeout(() => {
 5         this.countDownTime--
 6         if (this.countDownTime < 1) {
 7           this.BtnStatus = true
 8           this.countDownTime = 60
 9           localStorage.removeItem('myEndTime')
11           clearTimeout(time)
12         } else {
13           this.codeCountDown(endMsRes)
14         }
15       }, 1000)
16     },

 

posted @ 2020-10-26 10:48  顺·  阅读(452)  评论(0)  编辑  收藏  举报