Perkongsian kod untuk kesan kira detik kod pengesahan penghantaran telefon mudah alih dilaksanakan oleh jQuery

Perkongsian kod untuk kesan kira detik kod pengesahan penghantaran telefon mudah alih dilaksanakan oleh jQuery_jquery

WBOY

Lepaskan： 2016-05-16 15:43:28

asal

1426 orang telah melayarinya

Ini adalah kod kesan undur untuk menghantar kod pengesahan melalui telefon bimbit berdasarkan jquery Ia boleh merealisasikan fungsi paparan masa nyata undur detik dan fungsi mengesahkan format nombor telefon mudah alih Ia adalah laman web yang biasa digunakan pendaftaran dan penghantaran kod pengesahan telefon mudah alih.

Penerangan kesan:
Apabila mendaftar tapak web dan perlu menghantar kod pengesahan ke telefon mudah alih anda, kami sering menghadapi kesan ini:
Mula-mula semak sama ada telefon mudah alih mematuhi format 11 digit bermula dengan 1
Jika ia tidak sepadan, mesej ralat akan digesa dan palsu akan dikembalikan
Jika tidak, ia diserahkan ke latar belakang Selepas latar belakang mengesahkan penerimaan, nilai dikembalikan, dan butang hantar bertukar menjadi kelabu dan mengira detik.

Kesan operasi:

--------------------------------Demonstrasi kesan Muat turun kod sumber--------------------------------

Pelaksanaan jQuery kod kesan undur untuk telefon mudah alih menghantar kod pengesahan adalah seperti berikut

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

Salin selepas log masuk

Di atas ialah kod kesan undur untuk kod pengesahan penghantaran telefon mudah alih yang dilaksanakan oleh jquery untuk dikongsi dengan anda.