jQ效果：jQuery之插件开发短信发送倒计时功能

实现的主要功能如下：

1.点击按钮的时候，可以进行倒计时，倒计时自定义。

2.当接收短信失败后，倒计时停止，可点击重新发送短信。

3.点击的元素支持一般标签和input标签。

<input type="button" class="sameBtn btnCur" value="发送验证码"/>
div class="sameBtn btnCur2">发送验证码</div>

css代码：

body{padding:100px;text-align: center;}
.sameBtn{display: inline-block;font-size:12px;cursor:pointer;width:76px;height:25px;line-height: 25px; center;border:0;background: #3186df;color:#fff;}
.sameBtn.current{ #b1b1b1;}

js代码：

//短信倒计时功能
/**使用方式如下：
 * $(".btnCur").CountDownF({
 *        time:120,*         resetWords:'重新发送',//文字定义 
 *        cnSeconds:'s',//倒计时中显示中文的秒，还是s
 *        clickClass:'current',//点击后添加的class类
 *        countState:true,*        callback:function(){
 *            setTimeout(function(){
 *              //当发送失败后，可以立即清除倒计时与其状态
 *                $(".btnCur").CountDownF('clearState');
 *            },3000);
 *        }
 *    });
 * 
 * */

;(function($,window,document,undefined){
    var pluginName = 'CountDownF',defaluts = {
        time:120文字定义
        cnSeconds:'s',1)">倒计时中显示中文的秒，还是s
        clickClass:'current',1)">点击后添加的class类
        countState:true 是否可以倒计时，true可以倒计时，false不能进行倒计时
    }
     Count(element,options){
        this.element = element;
        this.$element = $(this.element);
        this.state = true;
        this.settings = $.extend({},defaluts,options);
        this.number = .settings.time;
        .init();
    }

    Count.prototype = {
        init:(){
            var self = ;
            self.$element.on('click',1)">(){
                if(self.state && self.settings.countState){
                    self.state = false;
                    if(self.settings.countState){
                        self._count();
                    }
                    (self.settings.callback){
                        self.settings.callback();
                    }
                }
                
            });
        },倒计时函数
        _count:;
            if(self.number == 0){
                self._clearInit();
            }else{
                if(self.number < 10){
                    如果当前元素是input，使用val赋值
                    this.$element.attr('type') ? this.$element.val('0' + self.number + self.settings.cnSeconds) : this.$element.html('0' + self.number + self.settings.cnSeconds);    
                }{
                    this.$element.val(self.number + self.settings.cnSeconds) : this.$element.html(self.number + self.settings.cnSeconds);
                }
                self.number--;
                .$element.addClass(self.settings.clickClass);
                self.clearCount = setTimeout((){
                    self._count();
                },1000);
            }
        },1)">修改是否可发送短信验证码倒计时状态
        change:(state){
            ;
            self.settings.countState = state;
        },1)">置为初始状态
        _clearInit:;
            self.$element.removeClass(self.settings.clickClass);
            self.$element.attr('type') ? self.$element.val(self.settings.resetWords) : self.$element.html(self.settings.resetWords); 
            clearTimeout(self.clearCount);
            self.number = self.settings.time;
            self.state = ;
        },1)">清除倒计时进行状态
        clearState:;
            self._clearInit();
        }
    };

    $.fn.CountDownF = (options){
        var args = arguments;
        if(options === undefined || typeof options ==='object' ){
            return this.each(if(!$.data(this,'plugin' + pluginName)){
                    $.data(new Count(else if(typeof options === 'string' && options !== 'init'){
            var returns;
             var data = $.data( pluginName);
                if(data instanceof Count && typeof data[options] === 'function'){
                    returns = data[options].apply(data,Array.prototype.slice.call(args,1));
                }
                if(options === 'destory'){
                     $.data(null);
                }
            });
             return returns !== undefined ? returns : ;
        }
        {
            $.error('Method' + options + 'does not exist on jQuery.CountDownF');
        }
    }

})(jQuery,document);

调用方式：

$((){
    $(".btnCur").CountDownF({
        time:120(){
            setTimeout((){
                $(".btnCur").CountDownF('clearState');
            },3000);
        }
    });

    $(".btnCur2").CountDownF({
        time:50(){
                $(".btnCur2").CountDownF('clearState');
        }
    });
})

github地址：https://github.com/hxlmqtily1314/sms_countdown

jQ效果：jQuery之插件开发短信发送倒计时功能

猜你在找的jQuery相关文章