您的位置:首页 > 其它

一个验证码倒计时插件

2015-12-14 16:45 288 查看
这个插件很简单,新手可参考之前的一篇文章:编写jquery常用插件的基本格式 ,本插件没提供css样式,需要使用的朋友根据实际情况改改就好,希望对你们有所帮助。

(function($){
$.fn.extend({
"Timing" : function(time,url,data){
var newopts = {
time:time,
url:url, //读取不同的验证接口,如:注册,密码找回,绑定手机等。。。。
data:data
};
var defaults = {
time:60  //默认倒计时60秒
};
//传参取代默认时间
var option = $.extend({},defaults,newopts);
var _this = $(this);
_this.on("click",send);
//ajax
function send() {
if( mobileBox.isValid() ){ // 此处判断手机格式是否通过验证,请根据实际情况更改,可删除
_this.html("正在发送");
option.data.mobile = mobileBox.val();
$.ajax({
type: "POST",
url: option.url,
dataType:"json",
data:option.data,
success: function(msg) {
if (msg.code !== 200) {

_this.html("发送验证码");
util.alertOnEl(msg.data.message, _this,{
autoClose:true
});
return;
}
_this.unbind("click"); //很重要,点击后取消点击事件,防止多次点击验证
var startTime = option.time; //一下是逻辑代码,点击后切换倒计时按钮样式
_this.html(startTime+"s重新发送").removeClass("send-validate").addClass("send-timing");
var timer = setInterval(function(){
_this.html(--startTime+"s重新发送");
if(startTime <= 0){
clearInterval(timer);
_this.html("重新发送").on("click",send).removeClass().addClass("send-validate");
}
},1000);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
console.log(XMLHttpRequest);
}
});
}
}
return this; //保持链式
}
});
})(jQuery)


  OK,就这样。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: