本文首先分析手機發送驗證碼的原理，再對javascript發送短信驗證碼予以實現，具體思路如下：
實現點擊“發送驗證碼”按鈕后，按鈕依次顯示為“59秒后重試”、“58秒后重試”…直至倒計時至0秒時再恢復顯示為“發送驗證碼”。在倒計時期間按鈕為禁用狀態 .
第一步、獲取按鈕、綁定事件、設置定時器變量和計時變量
第二步、添加定時器，每隔1秒鐘計時減 1，直至當計時小于等于 0 時清除定時器，按鈕恢復為“發送驗證碼”，否則顯示為“X秒后重試”
效果圖：
實現代碼：
- <!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 = "發送驗證碼";
- clearInterval(timer);
- times = 60;
- }
- //console.log(times);
- },1000);
- }
- }
- </script>
- </head>
- <body>
- <input type="button" id="send" value="發送驗證碼">
- </body>
- </html>
學習交流
- HTC M8怎么換主題 M8換主題方法12-23
- 錘子手機如何開啟單手撥號面板12-23
- OPPO R7拍照音如何關閉12-23
- LG G3如何開啟來電翻轉靜音12-23
- 兩種方式登錄FTP10-30
- 查看一個頂級域名下所有的二級域名10-30
- 用HOSTS文件屏蔽網站 建立網站映射的方法10-30
- 域名狀態及其意義總結10-30
- 二級域名原理以及程序，申請即可開通10-28
熱門圖片
猜你喜歡的新聞
新聞熱點
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
疑難解答
圖片精選