JS短信驗(yàn)證碼倒計(jì)時(shí)功能的實(shí)現(xiàn)（沒(méi)有驗(yàn)證碼，只有倒計(jì)時(shí)）
1、功能描述
當(dāng)用戶想要獲取驗(yàn)證碼時(shí)，就點(diǎn)擊 免費(fèi)獲取驗(yàn)證碼 ，然后開始倒計(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)站的支持！
- javascript發(fā)送短信驗(yàn)證碼實(shí)現(xiàn)代碼
- JS實(shí)現(xiàn)簡(jiǎn)單短信驗(yàn)證碼界面
- 基于JavaScript短信驗(yàn)證碼如何實(shí)現(xiàn)
- JS獲取短信驗(yàn)證碼倒計(jì)時(shí)的實(shí)現(xiàn)代碼
- JavaScript獲取短信驗(yàn)證碼（周期性）
- 手動(dòng)實(shí)現(xiàn)js短信驗(yàn)證碼輸入框
- JS實(shí)現(xiàn)短信驗(yàn)證碼一鍵登錄功能
- javascript實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼案例
- 使用JavaScript實(shí)現(xiàn)前端短信驗(yàn)證碼獲取功能全過(guò)程
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js+css實(shí)現(xiàn)換膚效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
ECharts折線圖的Legend（圖例）用于展示每條折線所對(duì)應(yīng)的數(shù)據(jù)系列名稱,下面這篇文章主要給大家介紹了關(guān)于echarts折線圖legend太多與圖重疊的處理辦法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
可以自動(dòng)輪換的頁(yè)簽 tabs with auto play fucntion
HTML、CSS方面改寫了一下結(jié)構(gòu)，用了一個(gè)DL javascript方面可以選擇不斷自動(dòng)循環(huán)，或者只循環(huán)一次的，點(diǎn)擊以后繼續(xù)循環(huán)，或者停止循環(huán)2008-02-02
今天小編就為大家分享一篇關(guān)于JSON字符串操作移除空串更改key/value的介紹，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
js實(shí)現(xiàn)數(shù)字從零慢慢增加到指定數(shù)字示例
今天小編就為大家分享一篇js實(shí)現(xiàn)數(shù)字從零慢慢增加到指定數(shù)字示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
JavaScript實(shí)現(xiàn)打開鏈接頁(yè)面的方式匯總
這篇文章主要介紹了JavaScript實(shí)現(xiàn)打開鏈接頁(yè)面的方式，非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
JavaScript使用forEach()與jQuery使用each遍歷數(shù)組時(shí)return false 的區(qū)別
這篇文章主要介紹了JavaScript使用forEach()與jQuery使用each遍歷數(shù)組時(shí)return false 的區(qū)別,非常不錯(cuò)，需要的朋友可以參考下2016-08-08
FingerprintJS是基于JS的瀏覽器指紋庫(kù),通過(guò)采集設(shè)備屬性生成唯一用戶標(biāo)識(shí),這篇文章主要介紹了fingerprint.js的安裝及基本使用方法的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-06-06
js動(dòng)態(tài)刪除div元素基本思路及實(shí)現(xiàn)代碼
這篇文章主要介紹了js動(dòng)態(tài)刪除div元素基本思路及實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-05-05![非常不錯(cuò)的[JS]Cookie精通之路](http://img.jbzj.com/images/xgimg/bcimg9.png)
Cookies，有些人喜歡它們，有些人憎恨它們。但是，很少有人真正知道如何使用它們?，F(xiàn)在你可以成為少數(shù)人中的成員－可以自傲的 Cookie 大師。2008-06-06