实现的主要功能如下:
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') "htmlcode">$(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插件开发发送短信倒计时功能代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月18日
2024年11月18日
- 群星《经典咏流传》限量1:1母盘直刻[低速原抓WAV+CUE]
- 庾澄庆1993《老实情歌》福茂唱片[WAV+CUE][1G]
- 许巍《在别处》美卡首版[WAV+CUE][1G]
- 林子祥《单手拍掌》华纳香港版[WAV+CUE][1G]
- 郑秀文.1997-我们的主题曲【华纳】【WAV+CUE】
- 群星.2001-生命因爱动听电影原创音乐AVCD【MEDIA】【WAV+CUE】
- 林志颖.1994-别了晴雨的回忆【飞碟】【WAV+CUE】
- 群星《经典咏流传2》限量1:1母盘直刻[低速原抓WAV+CUE]
- 【蓝卡唱片】卫海霞《乐海霞音珍藏版》WAV分轨
- 杨小琳《金装杨小琳》24K金碟特别版[低速原抓WAV+CUE]
- 群星《国风超有戏 第8期》[320K/MP3][30.32MB]
- 群星《国风超有戏 第8期》[FLAC/分轨][157.37MB]
- 群星《说唱梦工厂 第10期》[320K/MP3][99.5MB]
- 李嘉.1996-思念过秋冬【点将】【WAV+CUE】
- 汪峰.2009-信仰在空中飘扬【星文】【WAV+CUE】