一个验证码倒计时插件
2015-12-14 16:45
288 查看
这个插件很简单,新手可参考之前的一篇文章:编写jquery常用插件的基本格式 ,本插件没提供css样式,需要使用的朋友根据实际情况改改就好,希望对你们有所帮助。
OK,就这样。
(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,就这样。
相关文章推荐
- AFN的初步封装(post、GET、有无参数)
- 第十三周实践项目~Floyd算法的验证
- 第十六周实践项目1—验证算法(5)归并排序
- 第16周实践项目-选择排序之堆排序
- 第十六周上机实践项目3 - 归并排序算法的改进
- 第七周 项目一 建立顺序环形队列算法库
- 十六周 项目1 快速排序
- 下拉选项设置数据的三种方式介绍
- 第十五周 项目1 希尔排序
- 【Java学习笔记】JDBC连接mySql数据库
- android摄像头开发
- 第十六周项目1(5)-直接选择排序
- 1023. 组个最小数 (20)
- HDU 2577 dp 输入法切换最小次 两数组维护两种状态
- 【Javascript】保持先后顺序(操作符优先级)
- 英文邮件礼仪:向教授请教学术问题
- Android Stuido 导出 APK
- (第十六周项目4)英文单词的基数排序
- 第7周项目5 排队看病模拟
- 第16周、项目1—验证算法