vue.js—60秒倒计时
最近项目中需要实现获取验证码的功能,这里做了一个简单实现方式。废话不多说,直接撸代码。。。。。<div class="purse-mid-yanzheng"> <span class="purse-mid-yanzheng-one">验证码</span
最近项目中需要实现获取验证码的功能,这里做了一个简单实现方式。
废话不多说,直接撸代码。。。。。
<div class="purse-mid-yanzheng">
<span class="purse-mid-yanzheng-one">验证码</span>
<input type="text" placeholder="请输入验证码" />
<span class="purse-mid-yanzheng-two" @click="sendVcode(mobile)" id="yzm">获取验证码</span>
</div>
js:
export default {
data: function() {
return {
times: "60", //60秒倒计时
}
},
methods: {
//发送验证码,校验手机号
sendVcode: function(moblie) {
alert(moblie);
var that = this;
var regMoblie = /^1[345678]\d{9}$/;
if(!regMoblie.test(moblie)) {
msg('该手机号格式错误');
return;
}
$.ajax({
type: "post",
url: "/send_verification_code.do",
async: true,
data: {
mobile: moblie
},
dataType: "json",
success: function(result) {
if(result.result_code == 0) {
msg("获取验证码成功,请注意短信查收!");
that.countdown();
} else {
msg("获取验证码失败!");
console.log("获取验证码失败");
}
},
error: function() {
msg("服务器发生异常,请稍后再试!");
}
});
},
//60秒倒计时
countdown: function() {
var that = this;
if(that.times == 0) {
$('#yzm').html("获取验证码");
that.times = 60;
return false;
} else {
$('#yzm').html("" + that.times + "s");
that.times--;
}
setTimeout(function() {
that.countdown();
}, 1000);
},
},
mounted: function() {
}
};
ps: setInterval 实现倒计时,并清除计时器 //周期执行
需求:60s倒计时,自动执行agree();函数,也可以点击执行,返回时要清除计时器
export default {
data: function() {
return {
time: 60,
interval: ""
}
},
methods: {
goback: function() {
clearInterval(this.interval); //清除计时器
window.history.go(-1);
},
countdown: function() {
let that = this;
let interval = window.setInterval(function() {
that.interval = interval;
if ((that.time--) <= 1) {
clearInterval(interval);
that.agree(); //执行函数
}
}, 1000);
}
},
mounted: function() {
this.countdown(); //网页加载完成时调用
}
};,
更多推荐
所有评论(0)