Angular.js を使用して確認コードのカウントダウン 60 秒ボタン メソッドを取得する

最近プロジェクトに取り組んでいたときに、認証コードのカウントダウンが必要になったので、この機能がかなり実用的であることがわかったので、この記事では主に Angular.js を使用して実装する方法を紹介します。確認コードのカウントダウンボタンを取得する簡単な方法をご紹介します。

まえがき

この記事では主に、Angular.js での検証コード取得のための 60 秒カウントダウン ボタンの実装に関する内容を紹介します。この機能は皆さんよくご存知の機能なので、紹介する必要はないと思います。以下では多くを述べませんが、それを達成する方法を見てみましょう。

1. コントローラー内のコード

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);
 };
 });

2. HTML ページ

<button class="yz-btn" ng-click="onClick()" ng-disabled="timer"><span ng-if="showTimer">{{timerCount}}</span>{{text}}</button>

注:

1.class="yz-btn" はボタンのスタイルであり、自分で変更できます

2.ng -disabled= "timer" はボタンをクリックできるかどうかを制御します。 3.ng-if="showTimer" はデジタル表示を制御します。 4.ng-click="onClick()" は効果をトリガーし、テキストはデフォルトで "Get" になります。確認コード」をクリックすると「60秒後に再取得」となります。

3. 効果画像

1. クリック前

関連推奨事項:

認証コードを取得 60 秒カウントダウン

チャット アプレットの例コード解析カウントダウン60秒

検証コード画像を取得するPHPプログラムをlocal_PHPチュートリアルに修正

以上がAngular.js を使用して確認コードのカウントダウン 60 秒ボタン メソッドを取得するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。