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()"은 효과를 트리거하고 텍스트는 기본값입니다. "인증 코드 받기"를 클릭하면 "60초 후 다시 받기"가 됩니다.

3. 효과사진

1. 클릭 전

2. 클릭 후

자바스크립트 인증코드 받기 60초 카운트다운

WeChat 애플릿 예 코드 카운트다운 60초 분석

인증 코드 이미지를 얻는 PHP 프로그램을 local_PHP 튜토리얼

으로 수정하세요.

위 내용은 Angular.js를 사용하여 인증 코드 카운트다운 60초 버튼 방법을 얻으세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!