這篇文章主要介紹了純js實(shí)現(xiàn)重發(fā)驗(yàn)證碼按鈕倒數(shù)功能,本文整理了兩個(gè)實(shí)現(xiàn)代碼,需要的朋友可以參考下
代碼一：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(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要過一段時(shí)間才能繼續(xù)點(diǎn)擊。下面是一個(gè)簡單的例子：
<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>
更多信息請(qǐng)查看IT技術(shù)專欄
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試