實現的主要功能如下：
1.點擊按鈕的時候，可以進行倒計時，倒計時自定義。
2.當接收短信失敗后，倒計時停止，可點擊重新發送短信。
3.點擊的元素支持一般標簽和input標簽。
html代碼：
<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;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/hxlmqtily1314/sms_countdown
以上所述是小編給大家介紹的jQuery插件開發發送短信倒計時功能代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
