純js實(shí)現(xiàn)重發(fā)驗(yàn)證碼按鈕倒數(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>無(wú)標(biāo)題文檔</title> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <input type="button" id="btn" value="免費(fèi)獲取驗(yàn)證碼" onclick="settime(this)" /> <script type="text/javascript"> var countdown=60; function settime(val) { if (countdown == 0) { val.removeAttribute("disabled"); val.value="免費(fèi)獲取驗(yàn)證碼"; countdown = 60; } else { val.setAttribute("disabled", true); val.value="重新發(fā)送(" + countdown + ")"; countdown--; } setTimeout(function() { settime(val) },1000) } </script> </body> </html>
代碼二:
注冊(cè)的時(shí)候需要發(fā)送驗(yàn)證激活帳號(hào)的郵件,為了避免郵件的多次重復(fù)發(fā)送,所以可以在點(diǎn)擊了發(fā)送后,設(shè)置button要過(guò)一段時(shí)間才能繼續(xù)點(diǎn)擊。下面是一個(gè)簡(jiǎn)單的例子:
<html> <head> <title>點(diǎn)擊獲取驗(yàn)證碼按鈕后按鈕變灰,倒計(jì)時(shí)一段時(shí)間后又可重復(fù)點(diǎn)擊</title> </head> <body> <input type="button" id="btn" value="免費(fèi)獲取驗(yàn)證碼" /> <script type="text/javascript"> var wait=60; function time(o) { if (wait == 0) { o.removeAttribute("disabled"); o.value="免費(fèi)獲取驗(yàn)證碼"; wait = 60; } else { o.setAttribute("disabled", true); o.value=wait+"秒后可以重新發(fā)送"; wait--; setTimeout(function() { time(o) }, 1000) } } document.getElementById("btn").onclick=function(){time(this);} </script> </body> </html>
相關(guān)文章
一行代碼實(shí)現(xiàn)純數(shù)據(jù)json對(duì)象的深度克隆實(shí)現(xiàn)思路
今天整理了下資料,分析下為什么一句話可以實(shí)現(xiàn)純數(shù)據(jù)json對(duì)象的深度克隆,感興趣的朋友可以了解下哦2013-01-01JavaScript實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)時(shí)鐘
這篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06JavaScript Konami Code 實(shí)現(xiàn)代碼
JavaScript Konami Code 實(shí)現(xiàn)代碼2009-07-07用JS實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證功能
這篇文章主要介紹了用JS實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證功能,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-07-07JS實(shí)現(xiàn)手機(jī)號(hào)脫敏、郵箱脫敏、身份證號(hào)脫敏、姓名脫敏等常見(jiàn)脫敏代碼示例
這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)手機(jī)號(hào)脫敏、郵箱脫敏、身份證號(hào)脫敏、姓名脫敏等常見(jiàn)脫敏的相關(guān)資料,脫敏的目的是保護(hù)用戶(hù)隱私,一種常見(jiàn)的方式是顯示部分字符,用星號(hào)或其他字符替代,需要的朋友可以參考下2024-02-02Extjs4實(shí)現(xiàn)兩個(gè)GridPanel之間數(shù)據(jù)拖拽功能具體方法
這篇文章主要介紹了Extjs4實(shí)現(xiàn)兩個(gè)GridPanel之間數(shù)據(jù)拖拽功能具體方法,有需要的朋友可以參考一下2013-11-11JS 排序輸出實(shí)現(xiàn)table行號(hào)自增前端動(dòng)態(tài)生成的tr
一個(gè)項(xiàng)目,需要對(duì)數(shù)據(jù)進(jìn)行排序輸出,要求有行號(hào),依次遞增1.2.3.4.5,使用前端動(dòng)態(tài)生成的tr2014-08-08js傳中文參數(shù)controller里獲取參數(shù)亂碼問(wèn)題解決方法
js傳中文參數(shù),在controller里獲取參數(shù)亂碼的問(wèn)題在本文有個(gè)不錯(cuò)的解決方法,感興趣的朋友可以參考下2014-01-01