快捷導(dǎo)航

JS短信驗(yàn)證碼倒計(jì)時(shí)功能的實(shí)現(xiàn)（沒(méi)有驗(yàn)證碼，只有倒計(jì)時(shí)）

更新時(shí)間：2016年10月27日 10:02:17 作者：蘇羽壟

最近接了個(gè)項(xiàng)目，其中有這樣的需求：當(dāng)用戶想要獲取驗(yàn)證碼時(shí)，就點(diǎn)擊免費(fèi)獲取驗(yàn)證碼，然后開(kāi)始倒計(jì)時(shí)，倒計(jì)時(shí)期間按鈕文字為剩余時(shí)間x秒，且不可按狀態(tài)，倒計(jì)時(shí)結(jié)束后，按鈕更改為點(diǎn)擊重新發(fā)送，下面給大家分享js短信驗(yàn)證碼倒計(jì)時(shí)實(shí)現(xiàn)代碼

1、功能描述

　　當(dāng)用戶想要獲取驗(yàn)證碼時(shí)，就點(diǎn)擊免費(fèi)獲取驗(yàn)證碼，然后開(kāi)始倒計(jì)時(shí)，倒計(jì)時(shí)期間按鈕文字為剩余時(shí)間x秒，且不可按狀態(tài)，倒計(jì)時(shí)結(jié)束后，按鈕更改為點(diǎn)擊重新發(fā)送。

2、分析

　　必須用到定時(shí)器。按鈕點(diǎn)擊后，在定時(shí)器內(nèi)做出判斷。倒計(jì)時(shí)60秒，到0結(jié)束。

3、代碼實(shí)現(xiàn)：

　　重點(diǎn)介紹：定時(shí)器在進(jìn)行下一次倒計(jì)時(shí)之前，一定要清除一下，這樣的話保證下一次定時(shí)器倒計(jì)時(shí)是正常的。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.send{
width:250px;
margin:0 auto;
}
.send input{
display: block;
width:200px;
font:400 16px/30px "微軟雅黑";
outline: none;
border: none;
}
.send button{
height:30px;
border: none;
outline: none;
font:400 16px/30px "微軟雅黑";
text-align: center;
}
</style>
<script type="text/javascript">
window.onload=function(){
var button=document.getElementsByTagName("button")[0];
button.innerText="免費(fèi)獲取驗(yàn)證碼";
var timer=null;
button.onclick=function(){
clearInterval(timer);//這句話至關(guān)重要
var time=6;
var that=this;//習(xí)慣
timer=setInterval(function(){
console.log(time);
if(time<=0){
that.innerText="";
that.innerText="點(diǎn)擊重新發(fā)送";
that.disabled=false;
}else {
that.disabled=true;
that.innerText="";
that.innerText="剩余時(shí)間"+(time)+"秒";
time--;
}
},1000);
}
}
</script>
</head>
<body>
<div id="send">
<input type="text" name="in" id="in" value="" /><button></button>
</div>
</body>
</html>

以上所述是小編給大家介紹的JS短信驗(yàn)證碼倒計(jì)時(shí)功能的實(shí)現(xiàn)（沒(méi)有驗(yàn)證碼，只有倒計(jì)時(shí)），希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: