單擊按鈕發(fā)送驗(yàn)證碼,出現(xiàn)倒計(jì)時(shí)的簡(jiǎn)單實(shí)例

更新時(shí)間：2017年03月17日 09:39:56 投稿：jingxian

下面小編就為大家?guī)硪黄獑螕舭粹o發(fā)送驗(yàn)證碼,出現(xiàn)倒計(jì)時(shí)的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

實(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> 
<script src="jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
 
var InterValObj; //timer變量，控制時(shí)間 
var count = 30; //間隔函數(shù)，1秒執(zhí)行 
var curCount;//當(dāng)前剩余秒數(shù) 
 
function sendMessage() { 
 　curCount = count; 
　　//設(shè)置button效果，開始計(jì)時(shí) 
   $("#btnSendCode").attr("disabled", "true"); 
   $("#btnSendCode").val(curCount + "秒后可重新發(fā)送"); 
   InterValObj = window.setInterval(SetRemainTime, 1000); //啟動(dòng)計(jì)時(shí)器，1秒執(zhí)行一次 
　　  
  //請(qǐng)求后臺(tái)發(fā)送驗(yàn)證碼 TODO 
 
} 
 
//timer處理函數(shù) 
function SetRemainTime() { 
      if (curCount == 0) {         
        window.clearInterval(InterValObj);//停止計(jì)時(shí)器 
        $("#btnSendCode").removeAttr("disabled");//啟用按鈕 
        $("#btnSendCode").val("重新發(fā)送驗(yàn)證碼"); 
      } 
      else { 
        curCount--; 
        $("#btnSendCode").val(curCount + "秒后可重新發(fā)送"); 
      } 
    } 
</script> 
</head> 
<body> 
    <input id="btnSendCode" type="button" value="發(fā)送驗(yàn)證碼" onclick="sendMessage()" /></p> 
</body> 
</html>

以上這篇單擊按鈕發(fā)送驗(yàn)證碼,出現(xiàn)倒計(jì)時(shí)的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery Migrate 1.1.0 Released 注意事項(xiàng)
jQuery開發(fā)團(tuán)隊(duì)前一段時(shí)間發(fā)布了jQuery 1.9版本，刪除了1.8版本中的部分API，為了使前端開發(fā)者能夠順利遷移至該版本，該團(tuán)隊(duì)還發(fā)布了遷移插件jQuery Migrate
2014-06-06
jquery拖拽效果完整實(shí)例(附demo源碼下載)
這篇文章主要介紹了jquery拖拽效果實(shí)現(xiàn)方法,詳細(xì)介紹了jQuery實(shí)現(xiàn)拖拽功能的具體步驟與相關(guān)技巧,并附代碼了demo源碼供讀者下載參考,需要的朋友可以參考下
2016-01-01
jquery(live)中File input的change方法只起一次作用的解決辦法
jquery中File input的change方法只起一次作用的解決辦法，需要的朋友可以參考下。
2011-10-10
關(guān)于jquery layui彈出層的使用方法
這篇文章主要介紹了關(guān)于jquery layui彈出層的使用方法,需要的朋友可以參考下
2018-04-04
jquery中push()的用法(數(shù)組添加元素)
這篇文章主要介紹了jquery的push使用方法，可向數(shù)組的末尾添加一個(gè)或多個(gè)元素，并返回新的長(zhǎng)度,需要的朋友可以參考下
2014-11-11
jQuery 獲取頁(yè)面li數(shù)組并刪除不在數(shù)組中的key
這篇文章主要介紹了jQuery 獲取頁(yè)面li數(shù)組并刪除不在數(shù)組中的key 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
文本框水印提示效果的簡(jiǎn)單實(shí)現(xiàn)代碼
本篇文章主要是對(duì)文本框水印提示效果的簡(jiǎn)單實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02
解決jQuery ajax請(qǐng)求在IE6中莫名中斷的問題
本文主要介紹jQuery ajax請(qǐng)求在IE6中莫名中斷問題的解決方法，有需要的朋友可以參考一下。
2016-06-06
利用jQuery實(shí)現(xiàn)滑動(dòng)開關(guān)按鈕效果（附demo源碼下載）
這篇文章主要介紹了利用jQuery實(shí)現(xiàn)滑動(dòng)開關(guān)按鈕效果，文中給出了詳細(xì)的介紹，并在文末給出了完整的demo源碼下載，有需要的朋友可以參考簡(jiǎn)介，下面來一起看看吧。
2017-02-02
利用imgareaselect輔助后臺(tái)實(shí)現(xiàn)圖片上傳裁剪
這篇文章主要為大家詳細(xì)介紹了利用imgareaselect輔助后臺(tái)實(shí)現(xiàn)圖片裁剪的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03