前端手机发送验证码在发送成功后120秒内禁止重复发送

前端手机发送验证码在发送成功后120秒内禁止重复发送，基本思路都js判定的.而验证码是从后台返回的，首先一个js点击事件，点击之后动态把一个120秒倒计时计时器触发，并动态加载到点击按钮上，并且移除点击事件，当倒计时到0时移除把获取验证码按钮重新加载出来。并添加上点击事件。在这里需要着重注意的是监听事件的添加和移除一节计时器的把握，

js如下：

//手机获取验证码开始
$(function(){
var myFunction;
var InterValObj; //timer变量，控制时间
var count = 120; //间隔函数，1秒执行
var curCount;//当前剩余秒数
var hqdate;//获取验证码的时间
var tjdate;//发送验证码时间
var code;
var DDmyVcode = '';//验证码
var myphone;//手机号
$('#DDqrcode').bind('touchend',myFunction = function(){
// 倒计时
curCount = count;
var yzphone = /^1[3458]\d{9}$/;
myphone = $('#DDphone').val();
if(myphone == ''){
alert("对不起，请输入手机号");
}else if(!yzphone.exec(myphone)){
alert("请输入正确手机号");
}else{
// 如果手机号不为空启动定时器
$('#DDqrcode').unbind('touchend',myFunction);
InterValObj = setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次

$.ajax({
url:path + "/api/v301/user/getSmsCode",
data:{
"phone":myphone,
"type":'regist'
},
async:false,
type:"get",
success:function(data){
console.log(data)
try{
code = data.data.vcode;

}catch(e){
//TODO handle the exception
if(code != null){
InterValObj = setInterval(SetRemainTime, 1000)
}
else if(code == null){
alert("对不起，该用户已存在");
myphone = '';
clearInterval(InterValObj)
$('#DDqrcode').bind('touchend',myFunction);
}
}

// 获取验证码时间
// hqdate = (new Date(stratCard.replace(/-/g,"/"))).getTime();
// console.log(hqdate);
},error:function(msg){
console.log(msg);
}
});

}

});

function SetRemainTime(){
// console.log("111")
if (curCount == 0) {
clearInterval(InterValObj);//停止计时器
$('#DDqrcode').bind('touchend',myFunction);//启用按钮
$("#DDqrcode").text("重新发送");
DDmyVcode = ''; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
}else{
curCount--;
$("#DDqrcode").text(curCount + "s");
}
}

//手机验证码结束

在这个程序员苦逼的年代里我们需要抱团取暖

转载于:https://www.cnblogs.com/wenchao666/p/7656973.html