代码改变世界

一个短信验证码倒计时插件

2015-12-14 12:10  勤劳的插秧哥  阅读(1123)  评论(0编辑  收藏  举报

这个插件是大概是今年9月份写的了,当时项目很赶,没怎么优化,这次项目改版又要用到,在代码库里看到后顺便贴在博客上,刷刷存在感。这个插件很简单,新手可参考之前的一篇文章:编写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,就这样。