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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
JQuery复选框全选效果如何实现
May 08 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
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
jquery 笔记 事件
2011/11/02 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
Python isinstance判断对象类型
2008/09/06 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
Python实现随机漫步功能
2018/07/09 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
英国电器零售商:PRC Direct
2018/06/21 全球购物
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
档案室主任岗位职责
2014/02/12 职场文书
励志演讲稿500字
2014/08/21 职场文书
普通党员个人整改措施
2014/10/27 职场文书
英文慰问信范文
2015/03/24 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript