vue页面实现倒计时（纯前端展现版）

此篇主要是介绍一个纯前端进行的倒计时，刷新页面的情况下也不会导致重新计时。
其中的存储防方法用到的主要是localStorage

以登录发送验证码点发送之后进行300s的倒计时为例子展开这次的案例：

<div>
<el-link v-if="flag" type="primary" :underline="false" @click="getCode">获取验证码</el-link>
<div v-if="!flag" style="color: #a8abb2; cursor: pointer;">{{ `${getCodeNum}` }}</div>
</div>

const getCodeNum = ref(300)
const flag = ref(true)
const timer = ref(null)

获取验证码

function getCode() {
/*业务代码...*/
//300s倒计时
flag.value = false
getCodeNum.value === 300
const interval = setInterval(() => {
setStorage(getCodeNum.value)
if (getCodeNum.value-- <= 0) {
getCodeNum.value === 300 // 倒计时结束之后将初始值回归
flag.value = true
clearInterval(interval)
}
}, 1000)
}

// 写入localStorage

function setStorage(parm) {
localStorage.setItem('delay', parm)
localStorage.setItem('_time', new Date().getime())
}

// 读取localStorage

function getStorage() {
const localDelay = {}
localDelay.delay = localStorage.getItem('delay')
localDelay.sec = localStorage.getItem('_time')
return localDelay
}

// 防止页面刷新倒计时失效

function judgeCode() {
const localDelay = getStorage()
const secTime = parseInt(
(new Date().getTime - localDelay.sec) / 1000
) // 时间差 = 现在的时间 - 倒计时按下那一刻的时间
if (secTime > localDelay.delay) {
// 时间差大于倒计时则倒计时算作已结束(不在倒计时范围内了)
flag.value = true
console.log('已过期')
} else {
//倒计时范围之内
flag.value = false
let _delay = localDelay.delay - secTime // 剩余的需要倒计时的秒数
getCodeNum.value = _delay // 刷新页面时实时更新页面上的倒计时秒数，而不是头从开始
timer.value = setInterval(function() {
if (_delay > 1) {
_delay-- // 继续进行倒计时操作
setStorage(_delay) // 实时存储进localStorage中
getCodeNum.value = _delay
flag.value = false
} else {
flag.value = true
clearInterval(timer.value) // 清除
}
}, 1000)
}
}
judgeCode()

judgeCode方法中再写一个定时器的原因是刷新页面之后之前按下按钮所执行的倒计时方法已经不存在了，所以这里续上