ionic+AngularJs实现获取验证码倒计时按钮


Posted in Javascript onApril 22, 2017

按钮功能为:点击“获取验证码”——按钮不可用-设置倒计时-60秒后重新获取。

主要实现原理:点击后,设置一个$interval,每一秒更改一次剩余时间,并依赖Angular数据绑定实时显示在页面中。设置一个$timeout,60秒后将按钮初始化到可用状态。

实现代码:

(1)js代码,设置成一个directive以便多次调用。

angular.module('winwin').directive('timerbutton', function($timeout, $interval){
  return {
    restrict: 'AE',
    scope: {
      showTimer: '=',
      timeout: '='
    },
    link: function(scope, element, attrs){
      scope.timer = false;
      scope.timeout = 60000;
      scope.timerCount = scope.timeout / 1000;
      scope.text = "获取验证码";

      scope.onClick = function(){
        scope.showTimer = true;
        scope.timer = true;
        scope.text = "秒后重新获取";
        var counter = $interval(function(){
          scope.timerCount = scope.timerCount - 1;
        }, 1000);

        $timeout(function(){
          scope.text = "获取验证码";
          scope.timer = false;
          $interval.cancel(counter);
          scope.showTimer = false;
          scope.timerCount = scope.timeout / 1000;
        }, scope.timeout);
      }
    },
    template: '<button on-tap="onClick()" class="button button-calm xgmm-btn" ng-disabled="timer"><span ng-if="showTimer">{{ timerCount }}</span>{{text}}</button>'
  };
});

(2)html代码

<timerbutton show-timer="false">获取验证码</timerbutton>

实现效果:

(1)点击之前

ionic+AngularJs实现获取验证码倒计时按钮

(2)点击之后

ionic+AngularJs实现获取验证码倒计时按钮 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 新手学习常见问题解决方法
Apr 18 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
jquery datatable服务端分页
Aug 31 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
JS实现简单日历特效
Jan 03 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 #Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 #Javascript
AngularJS的脏检查深入分析
Apr 22 #Javascript
在node中如何使用 ES6
Apr 22 #Javascript
JS实现异步上传压缩图片
Apr 22 #Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 #Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 #Javascript
You might like
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
JavaScript 学习笔记(十五)
2010/01/28 Javascript
JavaScript中常见陷阱小结
2010/04/27 Javascript
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
简介Django中内置的一些中间件
2015/07/24 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
python 画图 图例自由定义方式
2020/04/17 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
美国精油公司:Plant Therapy
2019/05/17 全球购物
大学毕业的自我鉴定
2013/10/08 职场文书
财务会计毕业生自荐信
2013/11/02 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
项目合作协议书范本
2014/04/16 职场文书
公司授权委托书样本
2014/09/15 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
新员工入职感言范文!
2019/07/04 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers