源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-12-29 06:12 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要: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)点击之前   [img]http://files.jb51.net/file_images/article/201704/201704221029149.png[/img] (2)点击之后   [img]http://files.jb51.net/file_images/article/201704/2017042210291410.png[/img]   以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部