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


Posted in jQuery onMay 09, 2017

实现的主要功能如下:

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

jQuery 相关文章推荐
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
详解jquery选择器的原理
Aug 01 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 #jQuery
jquery平滑滚动到顶部插件使用详解
May 08 #jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 #jQuery
jquery replace方法去空格
May 08 #jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 #jQuery
JQuery实现图片轮播效果
May 08 #jQuery
jQuery中的deferred对象和extend方法详解
May 08 #jQuery
You might like
php escape URL编码
2008/12/10 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
php文件读取方法实例分析
2015/06/20 PHP
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
使用python实现省市三级菜单效果
2016/01/20 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
python Celery定时任务的示例
2018/03/13 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
生产车间实习自我鉴定
2013/09/23 职场文书
大学生专科毕业生自我评价
2013/11/17 职场文书
物业保安主管岗位职责
2013/12/25 职场文书
三年大学生活自我鉴定
2014/01/21 职场文书
环保证明
2015/06/23 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python