Ionic implements verification code countdown

This article mainly introduces the implementation of verification code countdown in Ionic Learning Diary. Now I share it with you and give it as a reference.

Preface

If you want to make an app, this function will definitely be involved, so I searched a lot of senior information on the Internet and found one that is most suitable for me. Implement this function in an easy-to-understand way, and write this diary to facilitate future review and learning from others

Ideas

When users register, many apps nowadays choose Binding a mobile phone number for registration is a very good idea. It is convenient for users to operate, and it is also very convenient to comply with the real-name system. When designing the button, it needs to be displayed next to the input verification code, and after the user clicks, it will start. Count down and turn the button into an unclickable effect

##Before clicking

After clicking

This diary only involves files under one page, including html, ts and scss (my page name is reg, which can be adjusted according to your specific situation)

is defined in reg.ts Information that can be obtained in html

//验证码倒计时
 verifyCode: any = {
  verifyCodeTips: "获取验证码",
  countdown: 60,
  disable: true
 }

reg.html design layout

The above picture is designed by myself, only the key code is taken here

<button item-right ion-button clear (click)="getCode()" [disabled]="!verifyCode.disable">{{verifyCode.verifyCodeTips}}</button>

Click event getCode(), set [disabled] whether the button can be clicked, and use the boolean value to judge. The main content displayed is verifyCode.verifyCodeTips, which is the text information and the countdown that needs to be implemented later

reg .ts Add method and countdown processing

When the button is clicked, the getCode() method will be triggered. After triggering the method, first change the value of disable to false, set the button to be unclickable, and then trigger settime. Method

 getCode() {
  //点击按钮后开始倒计时
  this.verifyCode.disable = false;
  this.settime();
 }

settime() specifically implements the countdown function

//倒计时
 settime() {
  if (this.verifyCode.countdown == 1) {
   this.verifyCode.countdown = 60;
   this.verifyCode.verifyCodeTips = "获取验证码";
   this.verifyCode.disable = true;
   return;
  } else {
   this.verifyCode.countdown--;
  }
  this.verifyCode.verifyCodeTips = "重新获取"+this.verifyCode.countdown+"秒";
  setTimeout(() => {
   this.verifyCode.verifyCodeTips = "重新获取"+this.verifyCode.countdown+"秒";
   this.settime();
  }, 1000);
 }

Use the counter to decrement by 1 every 1 second. For a simple countdown function, the important thing is to determine whether the counter is 1. When it is 1, it Re-initialize the three pieces of verifyCode information

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Use SpringMVC to solve vue cross-domain requests

The life cycle of Vue components and Route (detailed tutorial)

Implementing user permission control in Vue2.0

The above is the detailed content of Ionic implements verification code countdown. For more information, please follow other related articles on the PHP Chinese website!