上图为html
以下为js
;(function (window,document){
function getVerifyCode(options) {
var fn = arguments.callee;
return function() {
clearInterval(timer);
if(!(options && Object.prototype.toString.call(options.callBack) == "[object Function]")) {
throw new Error("必须传递参数及回调函数");
}
var that = $(this);
if(options.isPhone){
var phone = options.getPhone(),
reg = options.phoneReg || /^1[3|4|5|7|8][0-9]\d{8}$/;
if(!reg.test(phone)) {
//如果手机号码不正确,则执行手机号码对应的回调函数
options.phoneCallBack && options.phoneCallBack.call(that,phone);
return;
}
}
var timer = null,
time = options.time || 60,
count = 0,//记录定时器执行了多少次
interval = 1000,//每次执行间隔
start = new Date().getTime(),//开始执行时间
targetTime = time * 1000,//目标时间
unabledClass = options.unabledClass || "",
timeIsUpText = options.timeIsUpText || "重新获取",
timeRunnigText = options.timeRunnigText || " s后重新获取";
that.off("click");
that.addClass(unabledClass);
timer = setTimeout(function() {
var wucha = 0,//计算误差
//下一次执行时间,下一次执行时间 = 每次执行间隔 - 误差
nextRunTime = interval,
currentFn = arguments.callee;
count ++;
wucha = new Date().getTime() - (start + count * interval);
wucha = (wucha <= 0) ? 0 : wucha;
nextRunTime = interval - wucha;
nextRunTime = (nextRunTime <= 0) ? 0 : nextRunTime
//console.log("误差:" + wucha + ",下一次执行时间:" + nextRunTime);
if((targetTime -= interval) <= 0){
clearTimeout(timer);
/*time = 60;*/
that.html(timeIsUpText).removeClass(unabledClass);
that.on("click", fn(options));
}else{
time--;
that.html(time + timeRunnigText);
//在外部可以获取到倒计时当前时间
if(options.getCurrentTime && (Object.prototype.toString.call(options.getCurrentTime) == "[object Function]")){
options.getCurrentTime.call(that,time);
}
timer = setTimeout(currentFn,nextRunTime);
}
}, interval);
//执行回调函数
options.callBack.call(that);
}
}
window.getVerifyCode = getVerifyCode;
})(window,document);
$(function (){
//获取手机验证码
$("#j_getVerifyCode").on("click",getVerifyCode({
callBack: function (){//按钮点击后的回调函数,-----必须-----
//在这里你还是可以对你的按钮进行操作
//console.log(this);
alert("验证码发送成功");
},
time: 60,//定时时间,以秒为单位,默认60秒
getCurrentTime: function (time){//获取倒计时当前时间
//console.log(time);
//console.log(this);//这里的这个this执行按钮
//console.log("=================================");
},
isPhone: true,//是否为发送手机验证码,如果是则会验证手机号格式,-----必须-----
getPhone: function (){//获取手机号,此处一定要return
return $("#j_phone").val();
},
//phoneReg: /^1[34578]\d{9}$/,//手机号验证正则
phoneCallBack: function (){//当手机号有误时的回调,默认会中止操作
alert("您输入的手机号有误");
},
timeIsUpText: "重新发送",//倒计时时间到了后按钮所显示文字
timeRunnigText: "s后重新发送",//倒计时时间正在走的时候按钮所显示文字。默认为"xxs后重新获取"
unabledClass: "unlabed"//按钮不能用的样式,即点击按钮后的样式
}));
//获取普通验证码
$("#j_timekeeping").on("click",getVerifyCode({
callBack: function (){//按钮点击后的回调函数,-----必须-----
//在这里你还是可以对你的按钮进行操作
console.log(this);
alert("验证码发送成功");
},
time: 20,//定时时间,以秒为单位
unabledClass: "unlabed"//按钮不能用的样式,即点击按钮后的样式
}));
});
点击获取验证码,没反应
求大神帮我分析一下为什么不触发验证
两方面找问题:第一点击事件压根就没有触发,事件里面写个Alert()看看能不能弹出来就知道了,第二:就是你生成验证码的代码有问题,压根就无法生成