php短信发送倒计时,jQuery实现发送短信倒计时功能

本文将围绕着一下几种功能讲解：

1.点击按钮的时候，可以进行倒计时，倒计时自定义.2.当接收短信失败后，倒计时停止，可点击重新发送短信.3.点击的元素支持一般标签和input标签。看似很复杂其实实现代码很简单，下面小编给大家分享下实现代码，需要的朋友参考下吧。

实现的主要功能如下：

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);

}

});

})

怎么样大家学会了吗？赶紧动手尝试一下吧。

相关推荐：