jQ進級編--メール送信カウントダウン機能の開発

実現の主な機能は以下の通りである:1.ボタンをクリックすると、カウントダウン、カウントダウンカスタマイズができます.2.メールの受信に失敗した場合、カウントダウンを停止し、クリックしてメールを再送信することができます.3.クリックした要素は一般ラベルとinputラベルをサポートします.
htmlコード

cssコード

body{padding:100px;text-align: center;}
.sameBtn{display: inline-block;font-size:12px;cursor:pointer;width:76px;height:25px;line-height: 25px;text-align: center;border:0;background: #3186df;color:#fff;}
.sameBtn.current{background: #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,
        resetWords:'    ', //    
        cnSeconds:'s',//          ，  s
        clickClass:'current', //      class 
        countState:true //       ，true     ，false       
    }
    function Count(element,options){
        this.element = element;
        this.$element = $(this.element);
        this.state = true;
        this.settings = $.extend({},defaluts,options);
        this.number = this.settings.time;
        this.init();
    }

    Count.prototype = {
        init:function(){
            var self = this;
            self.$element.on('click',function(){
                if(self.state && self.settings.countState){
                    self.state = false;
                    if(self.settings.countState){
                        self._count();
                    }
                    if(self.settings.callback){
                        self.settings.callback();
                    }
                }
                
            });
        },

        //     
        _count:function(){
            var self = this;
            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);    
                }else{
                    this.$element.attr('type') ? this.$element.val(self.number + self.settings.cnSeconds) : this.$element.html(self.number + self.settings.cnSeconds);
                }
                self.number--;
                this.$element.addClass(self.settings.clickClass);
                self.clearCount = setTimeout(function(){
                    self._count();
                },1000);
            }
        },
        
        //                 
        change:function(state){
            var self = this;
            self.settings.countState = state;
        },
        
        //      
        _clearInit:function(){
            var self = this;
            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 = true;
        },

        //         
        clearState:function(){
            var self = this;
            self._clearInit();
        }
    };

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

})(jQuery,window,document);

コールモード

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

    $(".btnCur2").CountDownF({
        time:50,
        countState:true,
        cnSeconds:' ',
        callback:function(){
            setTimeout(function(){
                $(".btnCur2").CountDownF('clearState');
            },5000);
        }
    });
})

githubアドレス:https://github.com/hxlmqtily1...
作者:风雨后见虹出典:https://segmentfault.com/blog...声明:この文書が学習に役立つと思う場合は、サポートと励ましに注目してください.私のブログのこの子供靴を見て、私はあなたの気品が非凡であることを見て、話の間にかすかに王者の気があって、後で必ず1回の行為があります!画面右下に「おすすめ」という文字がありますが、あなたに役に立つと思ったら、ついでに注文してください.