JS implémente le code de vérification SMS-js tutoriel-php.cn

JS implémente le code de vérification SMS

巴扎黑

Libérer： 2017-08-11 10:16:43

original

2507 Les gens l'ont consulté

Pour implémenter l'interface du code de vérification SMS, vous devez d'abord avoir une zone de texte avec un bouton à côté. Lorsque vous cliquez dessus, le compte à rebours démarre. Ensuite, à travers cet article, je partagerai avec vous comment implémenter une interface simple de code de vérification SMS en utilisant js. Pour ceux qui sont intéressés, merci de vous y référer

1. Pour implémenter l'interface de code de vérification SMS, vous. doit d'abord avoir une zone de texte avec un bouton à côté de Démarrer le compte à rebours.

2. Créez d'abord une zone de texte et un bouton, définissez l'identifiant correspondant pour le bouton, puis récupérez l'élément bouton via l'identifiant dans js et effectuez des opérations dessus. Dans le même temps, le temps du compte à rebours et les variables de la minuterie doivent être définis de telle sorte qu'après avoir cliqué sur le bouton d'envoi, il soit impossible de continuer à cliquer sur le bouton pour renvoyer avant la fin du compte à rebours.

3. Une fois le compte à rebours terminé, effacez le minuteur et modifiez le texte en « Renvoyer le code de vérification » pour restaurer la possibilité d'utiliser le bouton. En même temps, redémarrez le compte à rebours à partir de 5 secondes afin que vous puissiez le faire. pouvez cliquer à nouveau dessus.

<head> 
  <meta charset="UTF-8"> 
  <title>js发送短信验证码</title> 
</head> 
<body> 
  <input type="text"/><button id="bt01">发送验证码</button> 
</body> 
<script type="text/javascript"> 
  var bt01 = document.getElementById("bt01"); 
  bt01.onclick = function() { 
    bt01.disabled = true;  //当点击后倒计时时候不能点击此按钮 
    var time = 5;  //倒计时5秒 
    var timer = setInterval(fun1, 1000);  //设置定时器 
    function fun1() { 
      time--; 
      if(time>=0) { 
        bt01.innerHTML = time + "s后重新发送"; 
      }else{ 
        bt01.innerHTML = "重新发送验证码"; 
        bt01.disabled = false;  //倒计时结束能够重新点击发送的按钮 
        clearTimeout(timer);  //清除定时器 
        time = 5;  //设置循环重新开始条件 
      } 
    } 
  } 
</script>

Copier après la connexion

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!