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

 更新时间:2017年04月22日 10:33:30   作者:Damono  
本篇文章主要介绍了ionic+AngularJs实现获取验证码倒计时按钮,具有一定的参考价值,有兴趣的可以了解一下。

按钮功能为:点击“获取验证码”——按钮不可用-设置倒计时-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)点击之前

  

(2)点击之后

   

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

相关文章

  • AngularJS入门教程之双向绑定详解

    AngularJS入门教程之双向绑定详解

    本文主要介绍AngularJS 双向绑定,这里整理了详细的知识资料并讲解,而且附有代码示例,有兴趣的小伙伴可以参考下
    2016-08-08
  • AngularJS实现的根据数量与单价计算总价功能示例

    AngularJS实现的根据数量与单价计算总价功能示例

    这篇文章主要介绍了AngularJS实现的根据数量与单价计算总价功能,涉及AngularJS事件响应与数值运算相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • Angular5集成eventbus的示例代码

    Angular5集成eventbus的示例代码

    这篇文章主要介绍了Angular5集成eventbus的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Angluar+zorro实现无限级菜单

    Angluar+zorro实现无限级菜单

    这篇文章主要为大家详细介绍了Angluar+zorro实现无限级菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • angular 实现下拉列表组件的示例代码

    angular 实现下拉列表组件的示例代码

    这篇文章主要介绍了angular 实现下拉列表组件的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • AngularJS 输入验证的原理解析

    AngularJS 输入验证的原理解析

    AngularJS 的输入验证是一个强大的功能,可以帮助开发者确保用户输入的数据是准确和完整的,这篇文章主要介绍了AngularJS 输入验证,需要的朋友可以参考下
    2024-07-07
  • 详解Angular中$cacheFactory缓存的使用

    详解Angular中$cacheFactory缓存的使用

    这篇文章主要介绍了Angular中$cacheFactory缓存的使用,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • 将angular-ui的分页组件封装成指令的方法详解

    将angular-ui的分页组件封装成指令的方法详解

    这篇文章主要给大家介绍了将angular-ui的分页组件封装成指令的方法,文中介绍的非常详细,相信会对大家的学习或者工作觉有一定的参考价值,需要的朋友下面来一起看看吧。
    2017-05-05
  • AngularJs动态加载模块和依赖注入详解

    AngularJs动态加载模块和依赖注入详解

    这篇文章主要为大家介绍了AngularJs动态加载模块和依赖注入,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 解决AngualrJS页面刷新导致异常显示问题

    解决AngualrJS页面刷新导致异常显示问题

    本篇文章主要介绍了解决AngualrJS页面刷新导致异常显示问题的方法。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04

最新评论