單擊按鈕發(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;//當(dāng)前剩余秒數(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操作Dom元素與遍歷以及JS遍歷詳細(xì)講解
這篇文章主要介紹了jQuery操作Dom元素、jQuery遍歷、JavaScript遍歷,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01jQuery前端框架easyui使用Dialog時bug處理
本文介紹了在jQuery前端框架easyui開發(fā)UI時,使用Dialog時發(fā)現(xiàn)遮罩無法覆蓋頁面內(nèi)容,而且對話框也顯示不出來,經(jīng)過一番研究,才發(fā)現(xiàn)問題所在,這里分享給大家,有相同情況的小伙伴可以參考下2014-12-12javascript(基于jQuery)實現(xiàn)鼠標(biāo)獲取選中的文字示例【測試可用】
這篇文章主要介紹了javascript(基于jQuery)實現(xiàn)鼠標(biāo)獲取選中的文字,涉及jQuery響應(yīng)鼠標(biāo)事件及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-10-10jQuery實現(xiàn)購物車表單自動結(jié)算效果實例
這篇文章主要介紹了jQuery實現(xiàn)購物車表單自動結(jié)算效果,涉及jquery動態(tài)獲取頁面元素及實時改變頁面元素值的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08