Ionische Implementierung des Verifizierungscode-Countdown-Beispielaustauschs

Bei der Registrierung von Benutzern entscheiden sich heutzutage viele Apps dafür, Mobiltelefonnummern für die Registrierung zu binden. Dies ist eine sehr gute Idee, die für Benutzer bequem zu bedienen ist und auch sehr praktisch ist, um beim Entwerfen der Schaltfläche das System mit echten Namen einzuhalten , müssen Sie zulassen, dass es neben dem eingegebenen Bestätigungscode angezeigt wird und nachdem der Benutzer darauf geklickt hat, einen Countdown startet und die Schaltfläche in einen nicht anklickbaren Effekt verwandelt. In diesem Artikel wird hauptsächlich die Implementierung des Bestätigungscode-Countdowns im Ionic-Lerntagebuch vorgestellt. Ich hoffe, er kann Ihnen helfen.

Dieses Tagebuch umfasst nur Dateien unter einer Seite, einschließlich HTML, TS und SCSS (mein Seitenname ist reg, der je nach Ihrer spezifischen Situation angepasst werden kann)

Definieren Sie die Informationen, die sein können erhalten in HTML in reg.ts

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

reg.html Design-Layout

oben Das Bild wurde von mir selbst entworfen, hier nehme ich nur den Schlüsselcode

Code kopieren Der Code lautet wie folgt:

{{verifyCode.verifyCodeTips}}

Klicken Sie auf das Ereignis getCode(), legen Sie fest [disabled] Ob die Die Schaltfläche, auf die geklickt werden kann, wird anhand eines booleschen Werts beurteilt. Der angezeigte Hauptinhalt ist „VerifyCode.verifyCodeTips“. Dabei handelt es sich um die Textinformationen und den Countdown, der später implementiert werden muss

reg.ts Additionsmethode und Countdown Verarbeitung

Wenn auf die Schaltfläche geklickt wird, wird die Methode getCode() ausgelöst. Ändern Sie nach dem Auslösen der Methode zunächst den Wert von „disable“ auf „false“, stellen Sie die Schaltfläche so ein, dass sie nicht anklickbar ist, und lösen Sie dann die Methode aus settime-Methode

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

settime() implementiert speziell die Countdown-Funktion

//倒计时
 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);
 }

Verwenden Sie den Zähler, um Dekrementieren Sie alle 1 Sekunde um 1, eine einfache Countdown-Funktion. Wichtig ist, zu beurteilen, ob der Zähler 1 ist. Wenn er 1 ist, initialisieren Sie die 3 Informationen von verifyCode neu.

Einfache Implementierungsmethode von Countdown für die Mobiltelefonregistrierung zum Senden des Bestätigungscodes

Verwenden Sie Angular .js, um den Bestätigungscode abzurufen, 60-Sekunden-Schaltflächenmethode

Countdown-Funktion zum Senden des Bestätigungscodes bei der Registrierung per Mobiltelefon

Das obige ist der detaillierte Inhalt vonIonische Implementierung des Verifizierungscode-Countdown-Beispielaustauschs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!