jQuery插件开发发送短信倒计时功能代码

实现的主要功能如下：

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插件开发发送短信倒计时功能代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！