快捷導(dǎo)航

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

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

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

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

效果描述：

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

運(yùn)行效果：

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

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

<!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手機(jī)發(fā)送驗(yàn)證碼倒計(jì)時(shí)代碼</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="請(qǐng)輸入用戶名" />
 </div>
 <div class="div-phone">
 <label for="phone">手機(jī)</label><input type="text" id="phone" class="infos" placeholder="請(qǐng)輸入手機(jī)" />
 <a href="javascript:;" class="send1" onclick="sends.send();">發(fā)送驗(yàn)證碼</a>
 </div>
 <div class="div-ranks">
 <label for="ranks">驗(yàn)證碼</label><input type="text" id="ranks" class="infos" placeholder="請(qǐng)輸入驗(yàn)證碼" />
 </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,""); //獲取輸入手機(jī)號(hào)碼
 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">手機(jī)格式錯(cuò)誤</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ā)送驗(yàn)證碼");
  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)于倒計(jì)時(shí)的文章請(qǐng)查看專題：《倒計(jì)時(shí)功能》

更多JavaScript時(shí)鐘特效點(diǎn)擊查看：JavaScript時(shí)鐘特效專題

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

您可能感興趣的文章: