Maison > Article > interface Web > Partage de code pour l'effet de compte à rebours du code de vérification d'envoi par téléphone mobile implémenté par jQuery_jquery

Partage de code pour l'effet de compte à rebours du code de vérification d'envoi par téléphone mobile implémenté par jQuery_jquery

WBOYoriginal: 2016-05-16 15:43:281394parcourir

Il s'agit d'un code à effet de compte à rebours pour l'envoi de codes de vérification par téléphone mobile basé sur jquery. Il peut réaliser la fonction d'affichage en temps réel du compte à rebours des secondes et la fonction de vérification du format du numéro de téléphone mobile. enregistrement et envoi du code d'effets de code de téléphone portable.

Description de l'effet :
Lors de l'enregistrement d'un site Web et de la nécessité d'envoyer un code de vérification sur votre téléphone mobile, nous rencontrons souvent cet effet :
Vérifiez d'abord si le téléphone mobile est conforme au format de 11 chiffres commençant par 1
; S'il ne correspond pas, un message d'erreur sera affiché et false sera renvoyé
; Sinon, il est soumis à l'arrière-plan. Une fois que l'arrière-plan a confirmé la réception, une valeur est renvoyée et le bouton d'envoi devient gris et compte à rebours.

Effet opérationnel :

--------------------------------Démonstration de l'effet Téléchargement du code source--------------------------------

L'implémentation jQuery du code d'effet de compte à rebours pour les téléphones mobiles pour envoyer des codes de vérification est la suivante

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery手机发送验证码倒计时代码</title>
<link href="css/jb51.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="form">
 <div class="div-name">
 <label for="name">用户名</label><input type="text" id="name" class="infos" placeholder="请输入用户名" />
 </div>
 <div class="div-phone">
 <label for="phone">手机</label><input type="text" id="phone" class="infos" placeholder="请输入手机" />
 <a href="javascript:;" class="send1" onclick="sends.send();">发送验证码</a>
 </div>
 <div class="div-ranks">
 <label for="ranks">验证码</label><input type="text" id="ranks" class="infos" placeholder="请输入验证码" />
 </div>
 <div class="div-conform">
 <a href="javascript:;" class="conform" onclick="sends.conform();">提交</a>
 </div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
var sends = {
 checked:1,
 send:function(){
  var numbers = /^1\d{10}$/;
  var val = $('#phone').val().replace(/\s+/g,""); //获取输入手机号码
  if($('.div-phone').find('span').length == 0 && $('.div-phone a').attr('class') == 'send1'){
  if(!numbers.test(val) || val.length ==0){
   $('.div-phone').append('<span class="error">手机格式错误</span>');
   return false;
  }
  }
  if(numbers.test(val)){
  var time = 30;
  $('.div-phone span').remove();
  function timeCountDown(){
   if(time==0){
   clearInterval(timer);
   $('.div-phone a').addClass('send1').removeClass('send0').html("发送验证码");
   sends.checked = 1;
   return true;
   }
   $('.div-phone a').html(time+"S后再次发送");
   time--;
   return false;
   sends.checked = 0;
  }
  $('.div-phone a').addClass('send0').removeClass('send1');
  timeCountDown();
  var timer = setInterval(timeCountDown,1000);
  }
 }
}
</script>
</body>
</html>

Ce qui précède est le code d'effet de compte à rebours pour le code de vérification d'envoi par téléphone portable mis en œuvre par jquery à partager avec vous. J'espère que vous pourrez l'aimer.

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：js implémente un code d'effet de menu de navigation à deux niveaux avec des compétences en coins arrondis_javascriptArticle suivant：js implémente un code d'effet de menu de navigation à deux niveaux avec des compétences en coins arrondis_javascript

Articles Liés

Voir plus