本文首先分析手機發(fā)送驗證碼的原理，再對javascript發(fā)送短信驗證碼予以實現(xiàn)，具體思路如下：
實現(xiàn)點擊“發(fā)送驗證碼”按鈕后，按鈕依次顯示為“59秒后重試”、“58秒后重試”…直至倒計時至0秒時再恢復(fù)顯示為“發(fā)送驗證碼”。在倒計時期間按鈕為禁用狀態(tài) .
第一步、獲取按鈕、綁定事件、設(shè)置定時器變量和計時變量
第二步、添加定時器，每隔1秒鐘計時減 1，直至當計時小于等于 0 時清除定時器，按鈕恢復(fù)為“發(fā)送驗證碼”，否則顯示為“X秒后重試”
效果圖：
實現(xiàn)代碼：
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <script type="text/javascript">
- window.onload=function(){
- var send=document.getElementById('send'),
- times=60,
- timer=null;
- send.onclick=function(){
- // 計時開始
- var that = this;
- this.disabled=true;
- timer = setInterval(function(){
- times --;
- that.value = times + "秒后重試";
- if(times <= 0){
- that.disabled =false;
- that.value = "發(fā)送驗證碼";
- clearInterval(timer);
- times = 60;
- }
- //console.log(times);
- },1000);
- }
- }
- </script>
- </head>
- <body>
- <input type="button" id="send" value="發(fā)送驗證碼">
- </body>
- </html>
學習交流
熱門圖片
猜你喜歡的新聞
猜你喜歡的關(guān)注
新聞熱點
2024-04-27 13:35:46
2024-04-27 13:33:47
2024-04-24 22:53:44
2024-04-23 19:32:50
2024-04-23 19:25:50
2024-04-23 19:13:19
疑難解答
圖片精選