jQuery實現(xiàn)的手機發(fā)送驗證碼倒計時效果代碼分享

更新時間：2015年08月24日 09:34:00 投稿：lijiao

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)手機注冊發(fā)送驗證碼倒計時功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

這是一款基于jquery實現(xiàn)的手機發(fā)送驗證碼倒計時效果代碼，可實現(xiàn)實時顯示秒數(shù)倒計時的功能，還可實現(xiàn)對手機號碼格式驗證的功能，是一款常用的網(wǎng)站注冊發(fā)送手機驗證碼特效代碼。

效果描述：

注冊一個網(wǎng)站，當需要發(fā)送驗證碼到手機上的時候，我們經(jīng)常碰到這樣的效果：
首先檢測手機是否符合1開頭，11位數(shù)字的格式；
若不符合，則提示錯誤信息并返回false；
否則提交給后臺，后臺確定接收后返回一個值，發(fā)送按鈕變?yōu)榛疑⒌褂嫊r。

運行效果：

--------------------------------效果演示源碼下載--------------------------------

為大家分享的jQuery實現(xiàn)的手機發(fā)送驗證碼倒計時效果代碼如下

<!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手機發(fā)送驗證碼倒計時代碼</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();">發(fā)送驗證碼</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("發(fā)送驗證碼");
  sends.checked = 1;
  return true;
  }
  $('.div-phone a').html(time+"S后再次發(fā)送");
  time--;
  return false;
  sends.checked = 0;
 }
 $('.div-phone a').addClass('send0').removeClass('send1');
 timeCountDown();
 var timer = setInterval(timeCountDown,1000);
 }
 }
}
</script>
</body>
</html>

更多關(guān)于倒計時的文章請查看專題：《倒計時功能》

更多JavaScript時鐘特效點擊查看：JavaScript時鐘特效專題

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: