获取验证码的时候,我们总是会用到定时器,来进行60秒的倒计时。单纯的js来写一个试一下。
单纯的js代码:
<!-- 点击按钮发送验证码同时按钮上60秒倒计时 -->
<button id="btn">点击获取</button>
$('#btn').click(function(){
// 获取验证码的请求,在此写自己的验证码请求
// 获取请求成功后,然后开始进行验证码倒计时
countDown(60)
})
function countDown(time){
// var timeCount=60;
var timer= setInterval(function(){
time--;
$('#btn').html(time+'秒');
if(timeCount==0){
clearInterval(timer)
$('#btn').html('点击获取');
}
},1000)
}
Vue代码:
<button type="default" @click="getCode">{{timeCont}}</button>
data() {
return {
imeCont: '点击获取验证码'
}
},
methods:{
getCode() {
// 这里写自己的和后台交互获取验证码的请求,现在我直接写定时器60秒倒计时
this.countDown(60)
},
countDown(time) {
let _this = this
time--
if (time == 0) {
_this.timeCont = '点击获取'
learInterval(timer)
return
}
let timer = setTimeout(function() {
_this.timeCont = time + '秒';
console.log(_this.timeCont)
_this.countDown(time)
}, 1000)
}
}
有问题的话,希望大家可指正!