本文將圍繞著一下幾種功能講解:
1.點擊按鈕的時候,可以進行倒數計時,倒數計時自訂.2.當接收簡訊失敗後,倒數計時停止,可點擊重新發送簡訊.3.點擊的元素支援一般標籤和input標籤。看似很複雜其實實作程式碼很簡單,下面小編跟大家分享下實現程式碼,需要的朋友參考下。
實現的主要功能如下:
1.點擊按鈕的時候,可以進行倒數計時,倒數計時自訂。
2.接收簡訊失敗後,倒數計時停止,可點選重新傳送簡訊。
3.點選的元素支援一般標籤和input標籤。
html程式碼:
<input type="button" class="sameBtn btnCur" value="发送验证码"/> <p class="sameBtn btnCur2">发送验证码</p>
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
PHP發送簡訊郵件等眾多實用PHP程式碼分享
#
以上是jQuery實作傳送簡訊倒數功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!