jQuery插件開(kāi)發(fā)發(fā)送短信倒計(jì)時(shí)功能代碼
實(shí)現(xiàn)的主要功能如下:
1.點(diǎn)擊按鈕的時(shí)候,可以進(jìn)行倒計(jì)時(shí),倒計(jì)時(shí)自定義。
2.當(dāng)接收短信失敗后,倒計(jì)時(shí)停止,可點(diǎn)擊重新發(fā)送短信。
3.點(diǎn)擊的元素支持一般標(biāo)簽和input標(biāo)簽。
html代碼:
<input type="button" class="sameBtn btnCur" value="發(fā)送驗(yàn)證碼"/> <div class="sameBtn btnCur2">發(fā)送驗(yàn)證碼</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代碼:
//短信倒計(jì)時(shí)功能
/**使用方式如下:
* $(".btnCur").CountDownF({
* time:120,
* resetWords:'重新發(fā)送', //文字定義
* cnSeconds:'s',//倒計(jì)時(shí)中顯示中文的秒,還是s
* clickClass:'current', //點(diǎn)擊后添加的class類(lèi)
* countState:true,
* callback:function(){
* setTimeout(function(){
* //當(dāng)發(fā)送失敗后,可以立即清除倒計(jì)時(shí)與其狀態(tài)
* $(".btnCur").CountDownF('clearState');
* },3000);
* }
* });
*
* */
;(function($,window,document,undefined){
var pluginName = 'CountDownF',
defaluts = {
time:120,
resetWords:'重新發(fā)送', //文字定義
cnSeconds:'s',//倒計(jì)時(shí)中顯示中文的秒,還是s
clickClass:'current', //點(diǎn)擊后添加的class類(lèi)
countState:true //是否可以倒計(jì)時(shí),true可以倒計(jì)時(shí),false不能進(jìn)行倒計(jì)時(shí)
}
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();
}
}
});
},
//倒計(jì)時(shí)函數(shù)
_count:function(){
var self = this;
if(self.number == 0){
self._clearInit();
}else{
if(self.number < 10){
//如果當(dāng)前元素是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);
}
},
//修改是否可發(fā)送短信驗(yàn)證碼倒計(jì)時(shí)狀態(tài)
change:function(state){
var self = this;
self.settings.countState = state;
},
//置為初始狀態(tài)
_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;
},
//清除倒計(jì)時(shí)進(jìn)行狀態(tài)
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);
調(diào)用方式:
$(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插件開(kāi)發(fā)發(fā)送短信倒計(jì)時(shí)功能代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery圖片滾動(dòng)圖片的效果(另類(lèi)實(shí)現(xiàn))
jQuery圖片滾動(dòng)圖片的效果(另類(lèi)實(shí)現(xiàn)),需要的朋友可以參考一下2013-06-06
8個(gè)超棒的學(xué)習(xí) jQuery 的網(wǎng)站 推薦收藏
根據(jù)國(guó)外科技網(wǎng)站 W3Techs 一項(xiàng)調(diào)查了近100萬(wàn)個(gè)網(wǎng)站數(shù)據(jù)顯示,jQuery是目前最流行的 JavaScript 庫(kù)。2011-04-04
深入理解JQuery keyUp和keyDown的區(qū)別
這篇文章主要是對(duì)JQuery中keyUp與keyDown的區(qū)別進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12
jQuery實(shí)現(xiàn)鼠標(biāo)跟隨效果
本文主要分享了jQuery實(shí)現(xiàn)鼠標(biāo)跟隨效果的示例代碼。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02
jQuery實(shí)現(xiàn)鏈接的title快速出現(xiàn)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鏈接的title快速出現(xiàn)的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02

