vue项目点击按钮获取手机验证码倒计时，并且页面刷新秒数不会被初始化。原理使用了sessionStorage，下面是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue项目点击按钮获取手机验证码开始倒计时，并且页面刷新秒数不会被初始化</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.name-input {
position: relative;
display: inline-block;
}
.input {
width: 400px;
height: 50px;
}
.auth-code {
cursor: pointer;
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
}
.auth-code.active {
color: #333;
opacity: .7;
cursor: not-allowed;
}
</style>
</head>
<body>
<div id="app">
<div class="item">
<div class="label-class">短信验证码</div>
<div class="name-input">
<input class="input" type="text" v-model="captcha">
<div class="auth-code" :class="[{'active': btnDisabled}]" @click="getCodeFn">{{btnDisabled ? captchaTime
+
'秒后重试' : '获取验证码'}}</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
// 验证码
captcha: '',
// 防止验证码按钮重复点击
btnDisabled: false,
// 验证码定时器
interval: null,
// 验证码倒计时
captchaTime: 60,
// 固定时间
fixedSecond2: 60,
}
},
mounted() {
// 获取上一次点击验证码的时间
let startTime = sessionStorage.getItem('startTime')
let num = (new Date().getTime() - startTime) / 1000;
let second = this.fixedSecond2 - parseInt(num);
console.log(second, "second----");
// 当重进登录页面或者登录页面被刷新后拿到上一次点击验证码的时间。如果没过期，则接着走倒计时,而不是从60秒重新开始倒计时
if (second > 0) {
this.btnDisabled = true;
this.captchaTime = second;
this.countdownFun60()
}
},
methods: {
// 获取验证码
getCodeFn() {
// 防止重复点击
if (this.btnDisabled) return;
this.btnDisabled = true;
this.countdownFun60();
// 验证码点击的时间
sessionStorage.setItem('startTime', new Date().getTime());
},
// 手机验证码60秒倒计时
countdownFun60() {
this.interval = setInterval(() => {
this.captchaTime = this.captchaTime - 1;
if (this.captchaTime === 0) {
clearInterval(this.interval);
this.btnDisabled = false;
this.captchaTime = this.fixedSecond2;
}
}, 1000)
},
}
})
</script>
</body>
</html>如果页面被关闭也想让倒计时生效，使用localStorage就可以了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。