recherche

Maison  >  Article  >  interface Web  >  Cliquez sur le bouton pour envoyer le code de vérification et un compte à rebours apparaîtra.

Cliquez sur le bouton pour envoyer le code de vérification et un compte à rebours apparaîtra.

小云云
小云云original
2018-01-22 13:13:482931parcourir

Parfois, lorsque nous envoyons un code de vérification, il y a toujours une fonction de compte à rebours. L'éditeur suivant vous présentera un exemple simple de clic sur un bouton pour envoyer un code de vérification et un compte à rebours apparaît. L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Les exemples sont les suivants : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script src="jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
 
var InterValObj; //timer变量，控制时间 
var count = 30; //间隔函数，1秒执行 
var curCount;//当前剩余秒数 
 
function sendMessage() { 
 　curCount = count; 
　　//设置button效果，开始计时 
   $("#btnSendCode").attr("disabled", "true"); 
   $("#btnSendCode").val(curCount + "秒后可重新发送"); 
   InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次 
　　  
  //请求后台发送验证码 TODO 
 
} 
 
//timer处理函数 
function SetRemainTime() { 
      if (curCount == 0) {         
        window.clearInterval(InterValObj);//停止计时器 
        $("#btnSendCode").removeAttr("disabled");//启用按钮 
        $("#btnSendCode").val("重新发送验证码"); 
      } 
      else { 
        curCount--; 
        $("#btnSendCode").val(curCount + "秒后可重新发送"); 
      } 
    } 
</script> 
</head> 
<body> 
    <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /></p> 
</body> 
</html>

L'avez-vous appris ? Dépêchez-vous et essayez-le.

Recommandations associées :

Implémentation JS de l'effet d'animation de compte à rebours via le partage d'objets Date

Enregistrement simple du téléphone mobile pour envoyer une vérification méthode de mise en œuvre du compte à rebours du code

jQuery implémente la fonction de compte à rebours pour l'envoi de messages texte

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!

jquery date JS 对象
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée du plug-in de mot de passe de geste jqueryArticle suivant：Explication détaillée du plug-in de mot de passe de geste jquery

Articles Liés

Voir plus