Ionic implementation of verification code countdown example sharing

When users register, many apps nowadays choose to bind mobile phone numbers for registration. This is a very good idea, which is convenient for users to operate and also very convenient to comply with the real-name system. When designing the button, you need to let It is displayed next to the input verification code, and after the user clicks it, it starts counting down and turns the button into an unclickable effect. This article mainly introduces the implementation of verification code countdown in Ionic learning diary. I hope it can help you.

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

Define the information that can be obtained in html in reg.ts

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

reg.html design layout

The above picture is I designed it myself, here I only take the key code

Copy code The code is as follows:

{{verifyCode.verifyCodeTips}}

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

reg.ts adding 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 the 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 After it is 1, re-initialize the 3 information of verifyCode

Simple implementation method of mobile phone registration to send verification code countdown

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

Send verification code countdown function when mobile phone registration

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