Utilisez Angular.js pour obtenir la méthode du bouton du compte à rebours de 60 secondes du code de vérification

Lorsque je travaillais sur un projet récemment, j'ai rencontré le besoin d'un compte à rebours du code de vérification. J'ai trouvé que cette fonction est assez pratique, j'ai donc pensé à la résumer. Cet article présente principalement comment utiliser Angular.js pour l'implémenter. le bouton de compte à rebours pour obtenir les codes de vérification. La méthode simple, les amis dans le besoin peuvent s'y référer, jetons un coup d'œil ci-dessous.

Avant-propos

Cet article présente principalement le contenu pertinent sur l'implémentation Angular.js du bouton de compte à rebours de 60 secondes pour obtenir le code de vérification. Je pense qu'il n'est pas nécessaire d'en introduire davantage. fonction. Tout le monde le connaît, donc je ne dirai rien ci-dessous, voyons comment l'implémenter.

1. Code dans le contrôleur

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. Page HTML

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

Remarque :

1.class=" yz -btn" est le style du bouton, qui peut être modifié par vous-même ;

2.ng-disabled="timer" contrôle si le bouton peut être cliqué ;

3.ng- if="showTimer" contrôle l'affichage numérique ;

4.ng-click="onClick()" déclenche l'effet par défaut sur "obtenir le code de vérification". et après avoir cliqué, c'est "récupérer après 60 ans".

3. Image d'effet

1. Avant de cliquer

2. >

Recommandations associées :

Compte à rebours Javascript de 60 secondes pour obtenir le code de vérification

Analyse du compte à rebours de 60 secondes pour obtenir le code de vérification dans l'applet WeChat

Modifiez le programme PHP qui obtient l'image du code de vérification vers le tutoriel local_PHP

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!