用Javascript實現(xiàn)發(fā)送短信驗證碼間隔功能
更新時間：2021年02月08日 10:40:33 作者：愛前端的茂茂
這篇文章主要介紹了用Javascript實現(xiàn)發(fā)送短信驗證碼間隔功能,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
在很多app和網(wǎng)站中，我們登陸或者注冊賬號，會有一個發(fā)送短信驗證碼的地方1，然而為了防止惡意獲取驗證碼，我們一般都設(shè)置了可點擊的時間間隔，時間間隔1完了過后，便又可以繼續(xù)發(fā)送，接下來用代碼實現(xiàn)
代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
手機號碼：<input type="text"><button>發(fā)送驗證碼</button>
<script>
var btn=document.querySelector('button')
var time=3
btn.addEventListener('click',function () {
btn.disabled=true
var timer=setInterval(function () {
if (time<0){
clearInterval(timer)
btn.disabled=false
btn.innerHTML='發(fā)送驗證碼'
time=3
}else {
btn.innerHTML = '還剩' + time + '秒'
time -= 1
}
},1000)
})
</script>
</body>
</html>
效果如下
代碼解釋
這里因為我們只改變按鈕的樣式和功能，所以只獲取了按鈕，然后設(shè)置一個time變量，這是倒計時的時間。然后設(shè)置點擊事件，當我們點擊這個按鈕過后讓這個按鈕的disable變?yōu)閠rue，意思是不能夠點擊。
然后設(shè)置定時器，判斷如果倒計時小于0，那么清除定時器，倒計時結(jié)束，讓按鈕變?yōu)榭牲c擊，里面的1文字變?yōu)榘l(fā)送驗證碼，接著重新給倒計時賦值為3.
如果倒計時大于0，把按鈕里面的文字改為'還剩' + time + ‘秒'，time–，每循環(huán)一次都判斷一次
到此這篇關(guān)于用Javascript實現(xiàn)發(fā)送短信驗證碼間隔的文章就介紹到這了,更多相關(guān)js發(fā)送短信驗證碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
webpack+vue-cil中proxyTable處理跨域的方法
這篇文章主要介紹了webpack+vue-cil中proxyTable處理跨域的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
最近在做一個項目，需要JS時間戳轉(zhuǎn)成C#里的時間，再把C#里的時間戳轉(zhuǎn)成JS的時間,就仔細研究了下js與C#進行轉(zhuǎn)換的注意要點，這里記錄下來，有需要的小伙伴自己拿走。2014-11-11
這篇文章主要介紹了js驗證整數(shù)加保留小數(shù)點的簡單實例，有需要的朋友可以參考一下2013-12-12
下面小編就為大家?guī)硪黄猨s表單序列化判斷空值的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
js如何去除數(shù)組中的empty?undefined空項
這篇文章主要介紹了js如何去除數(shù)組中的empty?undefined空項，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
在本篇文章里小編給大家分享了關(guān)于js中怎么判斷兩個字符串相等的實例和代碼，需要的朋友們學習參考下。2019-01-01
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本...2006-09-09
這篇文章主要為大家詳細介紹了微信小程序版翻牌小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
關(guān)于Iframe父頁面與子頁面之間的相互調(diào)用
下面小編就為大家?guī)硪黄P(guān)于Iframe父頁面與子頁面之間的相互調(diào)用。小編覺得挺不錯的，希望對大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-11-11
用js實現(xiàn)層隨著內(nèi)容大小動態(tài)漸變改變 推薦
以前做谷歌的小工具時，api里提供了一個很有用的函數(shù)，那就是在程序運行時可以使層動態(tài)隨內(nèi)容大小而變化，而且是平滑變換，在一些jquery的lightbox里也普遍有這種效果，看起來很酷的樣子。2009-12-12