이 글에서는 다음 기능에 중점을 둘 것입니다.
1. 버튼을 클릭하면 카운트다운 및 맞춤 설정이 가능합니다. 2. 문자 메시지 수신에 실패하면 카운트다운이 중지되고 클릭하여 문자 메시지를 다시 보낼 수 있습니다. 3. 클릭한 요소는 일반 태그와 입력 태그를 지원합니다. 매우 복잡해 보이지만 구현 코드는 실제로 매우 간단합니다. 필요한 친구가 참조할 수 있도록 구현 코드를 공유하겠습니다.
구현된 주요 기능은 다음과 같습니다.
1. 버튼을 클릭하면 카운트다운 및 맞춤설정이 가능합니다.
2. 문자 메시지 수신에 실패하면 카운트다운이 중지되며, 문자 메시지를 다시 보낼 수 있습니다.
3. 클릭한 요소는 일반 태그와 입력 태그를 지원합니다.
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는 SMS 이메일을 보내고 기타 다양한 실용적인 PHP 코드 공유를 보냅니다.
SMS 인증 코드를 보낸 후 60초 카운트다운을 실현합니다.
php는 SMS 인증 코드를 전송하여 등록 기능을 완료합니다
위 내용은 jQuery는 문자 메시지 전송을 위한 카운트다운 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!