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点击状态值改变背景色的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • Angularjs 双向绑定时字符串的转换成数字类型的问题

    Angularjs 双向绑定时字符串的转换成数字类型的问题

    这篇文章主要介绍了Angular js双向绑定时字符串的转换成数字类型的问题,需要的朋友可以参考下
    2017-06-06
  • AngularJS中$http使用的简单介绍

    AngularJS中$http使用的简单介绍

    在AngularJS中主要使用$http服务与远程http服务器交互,本篇文章主要介绍了AngularJS中$http使用的简单介绍,非常具有实用价值,需要的朋友可以参考下。
    2017-03-03
  • Angular网络请求的封装方法

    Angular网络请求的封装方法

    本篇文章主要介绍了Angular网络请求的封装方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 详解Angular依赖注入

    详解Angular依赖注入

    依赖注入(DI -- Dependency Injection)是一种重要的应用设计模式。Angular里面也有自己的DI框架,在设计应用时经常会用到它,它可以我们的开发效率和模块化程度。&#160;Angular系统中通过在类上添加@Injectable装饰器来告诉系统这个类(服务)是可注入的。
    2021-05-05
  • AngularJS API之copy深拷贝详解及实例

    AngularJS API之copy深拷贝详解及实例

    这篇文章主要介绍了AngularJS API之copy深拷贝详解及实例的相关资料,需要的朋友可以参考下
    2016-09-09
  • AngularJS2 与 D3.js集成实现自定义可视化的方法

    AngularJS2 与 D3.js集成实现自定义可视化的方法

    本篇文章主要介绍了ANGULAR2 与 D3.js集成实现自定义可视化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Angular中$compile源码分析

    Angular中$compile源码分析

    本文给大家分享的是通过angular中的$compile源码进行分析,从而更好的理解angular的使用,非常的不错,希望大家能够喜欢。
    2016-01-01
  • angular2组件中定时刷新并清除定时器的实例讲解

    angular2组件中定时刷新并清除定时器的实例讲解

    今天小编就为大家分享一篇angular2组件中定时刷新并清除定时器的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • angularJS结合canvas画图例子

    angularJS结合canvas画图例子

    这篇文章主要介绍了angularJS结合canvas画图例子的方法,需要的朋友可以参考下
    2015-02-02

最新评论