这个插件很简单,新手可参考之前的一篇文章:编写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,就这样。