Verwenden Sie Angular.js, um die Schaltflächenmethode für den 60-Sekunden-Countdown für den Bestätigungscode abzurufen

Als ich kürzlich an einem Projekt arbeitete, stellte ich fest, dass diese Funktion sehr praktisch ist. In diesem Artikel wird hauptsächlich die Verwendung von Angular.js vorgestellt Die Countdown-Schaltfläche zum Erhalten von Bestätigungscodes. Freunde in Not können sich darauf beziehen. Schauen wir uns unten an.

Vorwort

In diesem Artikel werden hauptsächlich die relevanten Inhalte zur Angular.js-Implementierung der 60-Sekunden-Countdown-Schaltfläche zum Erhalten des Bestätigungscodes vorgestellt Jeder ist damit vertraut, daher werde ich im Folgenden nichts sagen. Schauen wir uns an, wie man es implementiert.

1. Code im 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);
 };
 });

2. HTML-Seite

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

1.class=" yz -btn“ ist der Stil der Schaltfläche, der von Ihnen selbst geändert werden kann;

2.ng-disabled="timer" steuert, ob auf die Schaltfläche geklickt werden kann;

3.ng- if="showTimer" steuert die digitale Anzeige;

4.ng-click="onClick()" löst den Effekt standardmäßig auf „Bestätigungscode abrufen“ aus. und nach dem Klicken heißt es „Nach 60 Sekunden erneut abrufen“.

3. Effektbild

Vor dem Klicken

2 >

Verwandte Empfehlungen:

Javascript 60-Sekunden-Countdown zum Erhalt des Bestätigungscodes

Analyse des 60-Sekunden-Countdowns zum Erhalt des Bestätigungscodes im WeChat-Applet

Ändern Sie das PHP-Programm, das das Bestätigungscode-Bild erhält, in das local_PHP-Tutorial

Das obige ist der detaillierte Inhalt vonVerwenden Sie Angular.js, um die Schaltflächenmethode für den 60-Sekunden-Countdown für den Bestätigungscode abzurufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!