在很多app和網站中，我們登陸或者注冊賬號，會有一個發送短信驗證碼的地方1，然而為了防止惡意獲取驗證碼，我們一般都設置了可點擊的時間間隔，時間間隔1完了過后，便又可以繼續發送，接下來用代碼實現
代碼如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>手機號碼：<input type="text"><button>發送驗證碼</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='發送驗證碼' time=3 }else { btn.innerHTML = '還剩' + time + '秒' time -= 1 } },1000) })</script></body></html> |
效果如下
代碼解釋
這里因為我們只改變按鈕的樣式和功能，所以只獲取了按鈕，然后設置一個time變量，這是倒計時的時間。然后設置點擊事件，當我們點擊這個按鈕過后讓這個按鈕的disable變為true，意思是不能夠點擊。
然后設置定時器，判斷如果倒計時小于0，那么清除定時器，倒計時結束，讓按鈕變為可點擊，里面的1文字變為發送驗證碼，接著重新給倒計時賦值為3.
如果倒計時大于0，把按鈕里面的文字改為'還剩' + time + ‘秒'，time–，每循環一次都判斷一次
到此這篇關于用Javascript實現發送短信驗證碼間隔的文章就介紹到這了,更多相關js發送短信驗證碼內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/weixin_44029226/article/details/113737599
