使用Angular.js取得驗證碼倒數60秒按鈕方法

最近做專案的時候又遇到了驗證碼倒數計時的需求，發現這個功能還挺實用的，所以就想著總結一下，本文主要給大家介紹了關於利用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秒按鈕方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！