Use Angular.js to get the verification code countdown 60 seconds button method

When I was working on a project recently, I encountered the need for a verification code countdown. I found that this function is quite practical, so I thought of summarizing it. This article mainly introduces how to use Angular.js to implement the verification code countdown button. The simple method, friends in need can refer to it, let’s take a look below.

Preface

This article mainly introduces the relevant content about the Angular.js implementation of the 60-second countdown button for obtaining the verification code. I believe there is no need to introduce more about this function. Everyone is familiar with it, so I will not say anything below. Enough said, let’s take a look at how to implement it.

1. Code in 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.

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

in html page Note:

1.class="yz-btn" It is the style of the button, which can be modified by yourself;

2.ng-disabled="timer" controls whether the button can be clicked;

3.ng-if="showTimer "Control the digital display;

4. ng-click="onClick()" triggers the effect. The text defaults to "Get verification code", and after clicking it is "Get again after 60s".

3. Effect drawing

1. Before clicking

Javascript 60-second countdown to get verification code

Example analysis of 60-second countdown to get verification code in WeChat applet

Modify the PHP program that obtains the verification code image to the local_PHP tutorial

The above is the detailed content of Use Angular.js to get the verification code countdown 60 seconds button method. For more information, please follow other related articles on the PHP Chinese website!