最近做项目的时候又遇到了验证码倒计时的需求，发现这个功能还是挺实用的，所以就想着总结一下，本文主要给大家介绍了关于利用angular.js如何实现获取验证码倒计时按钮的简单方法，需要的朋友可以参考借鉴，下面来一起看看吧。
前言
本文主要介绍了关于angular.js实现获取验证码倒计时60秒按钮的相关内容，关于这个功能相信不用多介绍，大家都不陌生，所以下面话不多说了，来一起看看实现的方法吧。
一、controller中代码
angular.module('controllers')  .controller('loginctrl', function ($scope, $location,$ionicloading,$rootscope,$interval,$timeout) {  $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);  };  });
二、html页面中
<button class="yz-btn" ng-click="onclick()" ng-disabled="timer"><span ng-if="showtimer">{{timercount}}</span>{{text}}</button>
注：
1.class=yz-btn为button的样式，可自己修改；
2.ng-disabled=timer控制button是否可以点击；
3.ng-if=showtimer控制数字显示；
4.ng-click=onclick()触发效果，文字text默认“获取验证码”，点击之后为“60s后重新获取”。
三、效果图
1、点击前
2、点击后
相关推荐：
javascript 获取验证码60秒倒计时
微信小程序中获取验证码倒计时60s的实例分析
修改获取验证码图片到本地的php程序_php教程
以上就是使用angular.js获取验证码倒计时60秒按钮方法的详细内容。