这篇文章主要介绍了Angular.js怎么实现获取验证码倒计时60秒按钮，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联公司公司2013年成立，先为辽源等服务建站，辽源等地企业，进行企业商务咨询服务。为辽源企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
js有什么特点
1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。
一、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页面中
{{timerCount}}{{text}}
注：
1.class="yz-btn"为button的样式，可自己修改；
2.ng-disabled="timer"控制button是否可以点击；
3.ng-if="showTimer"控制数字显示；
4.ng-click="onClick()"触发效果，文字text默认“获取验证码”，点击之后为“60s后重新获取”。
三、效果图
1、点击前
2、点击后
感谢你能够认真阅读完这篇文章，希望小编分享的“Angular.js怎么实现获取验证码倒计时60秒按钮”这篇文章对大家有帮助，同时也希望大家多多支持创新互联成都网站设计公司，关注创新互联成都网站设计公司行业资讯频道，更多相关知识等着你来学习!
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
本文名称：Angular.js怎么实现获取验证码倒计时60秒按钮-创新互联
路径分享：
http://cdkjz.cn/article/cdjpec.html
