Heim > Artikel > Web-Frontend > Code-Sharing für den Countdown-Effekt des Verifizierungscodes für das Senden von Mobiltelefonen, implementiert durch jQuery_jquery

Code-Sharing für den Countdown-Effekt des Verifizierungscodes für das Senden von Mobiltelefonen, implementiert durch jQuery_jquery

WBOYOriginal: 2016-05-16 15:43:281395Durchsuche

Dies ist ein Countdown-Effektcode zum Senden von Bestätigungscodes per Mobiltelefon, der auf JQuery basiert. Er kann die Funktion der Echtzeitanzeige des Sekunden-Countdowns und die Funktion der Überprüfung des Mobiltelefonnummernformats realisieren Registrierung und Verifizierung des Handy-Codes.

Wirkungsbeschreibung:
Bei der Registrierung einer Website und der Notwendigkeit, einen Bestätigungscode an Ihr Mobiltelefon zu senden, tritt häufig dieser Effekt auf:
Überprüfen Sie zunächst, ob das Mobiltelefon dem 11-stelligen Format entspricht, beginnend mit 1; Wenn es nicht übereinstimmt, wird eine Fehlermeldung angezeigt und „false“ zurückgegeben Andernfalls wird es an den Hintergrund gesendet. Nachdem der Hintergrund den Empfang bestätigt hat, wird ein Wert zurückgegeben und die Schaltfläche „Senden“ wird grau und zählt herunter.

Betriebseffekt:

--------------------------------

Effektdemonstration

Quellcode-Download-------------------------------- Die jQuery-Implementierung des Countdown-Effektcodes für Mobiltelefone zum Senden von Bestätigungscodes lautet wie folgt

<!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>

Das Obige ist der von jquery implementierte Countdown-Effektcode für den Verifizierungscode für das Senden von Mobiltelefonen, den ich mit Ihnen teilen möchte.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js implementiert zweistufigen Navigationsmenüeffektcode mit abgerundeten Ecken_Javascript-FähigkeitenNächster Artikel：js implementiert zweistufigen Navigationsmenüeffektcode mit abgerundeten Ecken_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen