Home > Web Front-end > JS Tutorial > body text

Ionic implementation of verification code countdown example sharing

小云云
Release: 2018-02-09 10:18:13
Original
1577 people have browsed it

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
 }
Copy after login

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:



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();
 }
Copy after login

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);
 }
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template