單擊按鈕發(fā)送驗證碼,出現(xiàn)倒計時的簡單實例
更新時間：2017年03月17日 09:39:56 投稿：jingxian
下面小編就為大家?guī)硪黄獑螕舭粹o發(fā)送驗證碼,出現(xiàn)倒計時的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
實例如下：
<!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變量，控制時間
var count = 30; //間隔函數(shù)，1秒執(zhí)行
var curCount;//當前剩余秒數(shù)
function sendMessage() {
curCount = count;
//設(shè)置button效果，開始計時
$("#btnSendCode").attr("disabled", "true");
$("#btnSendCode").val(curCount + "秒后可重新發(fā)送");
InterValObj = window.setInterval(SetRemainTime, 1000); //啟動計時器，1秒執(zhí)行一次
//請求后臺發(fā)送驗證碼 TODO
}
//timer處理函數(shù)
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止計時器
$("#btnSendCode").removeAttr("disabled");//啟用按鈕
$("#btnSendCode").val("重新發(fā)送驗證碼");
}
else {
curCount--;
$("#btnSendCode").val(curCount + "秒后可重新發(fā)送");
}
}
</script>
</head>
<body>
<input id="btnSendCode" type="button" value="發(fā)送驗證碼" onclick="sendMessage()" /></p>
</body>
</html>
以上這篇單擊按鈕發(fā)送驗證碼,出現(xiàn)倒計時的簡單實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery Migrate 1.1.0 Released 注意事項
jQuery開發(fā)團隊前一段時間發(fā)布了jQuery 1.9版本，刪除了1.8版本中的部分API，為了使前端開發(fā)者能夠順利遷移至該版本，該團隊還發(fā)布了遷移插件jQuery Migrate2014-06-06
這篇文章主要介紹了jquery拖拽效果實現(xiàn)方法,詳細介紹了jQuery實現(xiàn)拖拽功能的具體步驟與相關(guān)技巧,并附代碼了demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01
jquery(live)中File input的change方法只起一次作用的解決辦法
jquery中File input的change方法只起一次作用的解決辦法，需要的朋友可以參考下。2011-10-10
這篇文章主要介紹了關(guān)于jquery layui彈出層的使用方法,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了jquery的push使用方法，可向數(shù)組的末尾添加一個或多個元素，并返回新的長度,需要的朋友可以參考下2014-11-11
jQuery 獲取頁面li數(shù)組并刪除不在數(shù)組中的key
這篇文章主要介紹了jQuery 獲取頁面li數(shù)組并刪除不在數(shù)組中的key 的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
本篇文章主要是對文本框水印提示效果的簡單實現(xiàn)代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
本文主要介紹jQuery ajax請求在IE6中莫名中斷問題的解決方法，有需要的朋友可以參考一下。2016-06-06
利用jQuery實現(xiàn)滑動開關(guān)按鈕效果（附demo源碼下載）
這篇文章主要介紹了利用jQuery實現(xiàn)滑動開關(guān)按鈕效果，文中給出了詳細的介紹，并在文末給出了完整的demo源碼下載，有需要的朋友可以參考簡介，下面來一起看看吧。2017-02-02
利用imgareaselect輔助后臺實現(xiàn)圖片上傳裁剪
這篇文章主要為大家詳細介紹了利用imgareaselect輔助后臺實現(xiàn)圖片裁剪的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03