cari

Rumah >hujung hadapan web >tutorial js >Perkongsian kod untuk kesan kira detik kod pengesahan penghantaran telefon mudah alih dilaksanakan oleh jQuery_jquery

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

WBOY
WBOYasal
2016-05-16 15:43:281482semak imbas

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>

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js melaksanakan kod kesan menu navigasi dua peringkat dengan kemahiran corners_javascript bulatArtikel seterusnya：js melaksanakan kod kesan menu navigasi dua peringkat dengan kemahiran corners_javascript bulat

Artikel berkaitan

Lihat lagi