JQ advanced — developing the countdown function of SMS sending

Time:2021-11-21

The main functions are as follows:
1. When you click the button, you can count down and customize the countdown.
2. When receiving SMS fails, the countdown stops, and you can click to resend the SMS.
3. The clicked element supports general tags and input tags.

HTML code

< input type = "button" class = "samebtn btncur" value = "send verification code" / >
< div class = "samebtn btncur2" > send verification code < / div >

CSS code

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 code

//SMS countdown function
/**The usage is as follows:
 * $(".btnCur").CountDownF({
 *        time:120,
 *Resetwords: 'resend', // text definition 
 *Cnseconds:'s', // Chinese seconds are displayed in the countdown, or s
 *Clickclass: 'current', // click the added class
 *        countState:true,
 *        callback:function(){
 *            setTimeout(function(){
 *// when sending fails, you can immediately clear the countdown and its status
 *                $(".btnCur").CountDownF('clearState');
 *            },3000);
 *        }
 *    });
 * 
 * */

;(function($,window,document,undefined){
    var pluginName = 'CountDownF',
    defaluts = {
        time:120,
        Resetwords: 'resend', // text definition
        Cnseconds:'s', // Chinese seconds are displayed in the countdown, or s
        Clickclass: 'current', // click the added class
        Countstate: true // whether countdown can be performed. If true, countdown can be performed. If false, countdown cannot be performed
    }
    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();
                    }
                }
                
            });
        },

        //Countdown function
        _count:function(){
            var self = this;
            if(self.number == 0){
                self._clearInit();
            }else{
                if(self.number < 10){
                    //If the current element is input, Val is used for assignment
                    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);
            }
        },
        
        //Modify whether to send SMS verification code countdown status
        change:function(state){
            var self = this;
            self.settings.countState = state;
        },
        
        //Set to initial 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;
        },

        //Clear countdown progress status
        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);

Call mode

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

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

GitHub address:https://github.com/hxlmqtily1…

Author: rainbow after wind and rain
source:https://segmentfault.com/blog…
Statement: if you think this article is helpful to your study, please pay more attention to support and encouragement. I’m reading the children’s shoes on my blog. I think you have extraordinary bearing. There’s a king’s spirit in your conversation. You must do something in the future! In the lower right corner of the screen“Recommended”If you think it’s helpful to you, you can order it easily.