登录验证码倒计时优化 页面刷新实时倒计时

源：https://www.cnblogs.com/HDou/p/5553424.html

现在很多页面是需要获取验证码的，但是相信很多页面是没有做这样的优化的，比如下面这个场景：

现在访问一个注册页面，页面有一个填写手机号，获取验证码的按钮，点击获取验证码按钮之后，按钮变成灰色，然后是60倒计时效果。在60S内我无法再次点击获取验证码按钮。因为按钮是灰色的，不可点击状态。

但是，如果在倒计时进行时我刷新一下页面，一般的页面就会全部刷新，包括倒计时效果也没有了，按钮恢复到最初可点击状态，这其实是不符合逻辑的。按正常逻辑是，页面仍然倒计时，如果我刷新页面，倒计时依然存在，并且按钮不可点击。

再有一种场景：如果在倒计时任然进行时，我关闭了页面，然后在60S内重新打开页面，按道理说60s时间还没有过完，我重新打开页面，倒计时效果应该依然存在，并且与实际流逝时间对应，也就是说，我点击按钮，倒计时进行到50s的时候，我关闭页面，然后过去40s之后我重新打开页面，倒计时效果应该进行至10s。

但是，现有很多页面是没有实现这样的逻辑的。也就是说页面刷新，倒计时就没有了，按钮又恢复了，自然是不合理不符合逻辑的，针对这样的问题我的解决方案如下。

1.点击获取验证码按钮，改变按钮为不可点击状态，进行倒计时计时器，并且实时记录倒计时秒数，以及当前时间time1。

2.页面刷新的时候监听倒计时按钮，获取倒计时秒数，以及页面关闭的时的时间time1，和当前时间time2。

3.如果当前时间与关闭页面的时间的差 小于关闭页面的倒计时秒数，倒计时任然再进行，修改按钮为倒计时样式。

<input class="phone" type="number" placeholder="验证码" v-model="loginForm.verification">
<button class="close_tel" v-show="show" @click="getCode">获取验证码</button>
<button class="close_tel2" v-show="!show">重新获取({{count}}s)</button>
            
const TIME_COUNT = 30
if (!this.timer) { // timer: null // 该变量是用来记录定时器的,防止点击的时候触发多个setInterval
 this.count = TIME_COUNT
 this.show = false
 this.checkTel()
 this.timer = setInterval(() => {
   if (this.count > 0 && this.count <= TIME_COUNT) {
     this.count--
   } else {
     this.show = true
     clearInterval(this.timer)
     this.timer = null
   }
 }, 1000)