Implémentation ionique du partage d'exemples de compte à rebours du code de vérification

Lorsque les utilisateurs s'inscrivent, de nombreuses applications choisissent aujourd'hui de lier les numéros de téléphone mobile pour l'enregistrement. C'est une très bonne idée, qui est pratique à utiliser pour les utilisateurs et également très pratique pour se conformer au système de nom réel lors de la conception du bouton. , vous devez le laisser s'afficher à côté du code de vérification d'entrée, et une fois que l'utilisateur a cliqué dessus, le compte à rebours commence et transforme le bouton en un effet non cliquable. Cet article présente principalement la mise en œuvre du compte à rebours du code de vérification dans le journal d'apprentissage Ionic. J'espère que cela pourra vous aider.

Cet agenda ne comporte que des fichiers sur une seule page, y compris html, ts et scss (le nom de ma page est reg, qui peut être ajusté en fonction de votre situation spécifique)

Définissez les informations qui peuvent être obtenu en html dans reg.ts

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

reg.html design layout

ci-dessus L'image est conçue par moi-même, ici je ne prends que le code clé

Copier le code Le code est le suivant :

{{verifyCode.verifyCodeTips}}

Cliquez sur l'événement getCode(), définissez [disabled] Si le bouton sur lequel on peut cliquer est jugé par une valeur booléenne. Le contenu principal affiché est verifyCode.verifyCodeTips, c'est-à-dire les informations textuelles et le compte à rebours qui doivent être implémentés ultérieurement

méthode d'ajout de reg.ts. et traitement du compte à rebours

Lorsque vous cliquez sur le bouton, la méthode getCode() sera déclenchée. Après avoir déclenché la méthode, modifiez d'abord la valeur de désactivé sur false, définissez le bouton pour qu'il ne soit pas cliquable, puis déclencher la méthode settime

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

settime() implémente spécifiquement la fonction de compte à rebours

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

Utilisez le compteur pour décrémenter de 1 toutes les 1 seconde, une simple fonction de compte à rebours, l'important est de juger si le compteur est à 1, quand il est à 1, réinitialisez les 3 informations de verifyCode

Implémentation simple méthode de compte à rebours pour l'enregistrement du téléphone mobile pour envoyer le code de vérification

Utilisez Angular .js Obtenez le compte à rebours du code de vérification Méthode du bouton de 60 secondes

Envoyer le code de vérification fonction compte à rebours lors de l'inscription sur téléphone portable

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!