倒计时器，重新发送验证码定时器
2019-10-24 本文已影响0人
花拾superzay
倒计时器在获取手机验证码时用到的特别频繁，这里用vue写了一个简洁的倒计时器，给初学者参考
<!DOCTYPE html>
<html>
<head>
<title>vue-基本开发-demo</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style>
#app {
text-align: center
}
#app>div {
display: inline-block;
cursor: pointer;
background: darkolivegreen;
margin: auto;
padding: 0 10px;
border-radius: 15px;
height: 30px;
line-height: 30px;
color: #fff
}
</style>
</head>
<body>
<div id='app'>
<div @click='resendCode' style=''>
<span>{{countDown===-1?"重新发送":"已发送"}}</span>
<span v-if='countDown>-1'>( {{countDown}}s )</span>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
let model = new Vue({
el: '#app',
data: {
countDown: -1
},
methods: {
triggerCountDown(num) {
if(this.countDown !== -1) {
return
} else {
this.countDown = num ? num : 59;
}
let timer = setInterval(() => {
this.countDown--;
if(this.countDown === -1) {
clearInterval(timer);
}
}, 1000)
},
resendCode() {
if(this.countDown > -1) return;
//触发倒计时
this.triggerCountDown(19);
/*其他逻辑代码*/
}
}
})
</script>
</body>
</html>
