本文首先分析手機(jī)發(fā)送驗(yàn)證碼的原理,再對(duì)javascript發(fā)送短信驗(yàn)證碼予以實(shí)現(xiàn),具體思路如下:
實(shí)現(xiàn)點(diǎn)擊“發(fā)送驗(yàn)證碼”按鈕后,按鈕依次顯示為“59秒后重試”、“58秒后重試”…直至倒計(jì)時(shí)至0秒時(shí)再恢復(fù)顯示為“發(fā)送驗(yàn)證碼”。在倒計(jì)時(shí)期間按鈕為禁用狀態(tài) .
第一步、獲取按鈕、綁定事件、設(shè)置定時(shí)器變量和計(jì)時(shí)變量
第二步、添加定時(shí)器,每隔1秒鐘計(jì)時(shí)減 1,直至當(dāng)計(jì)時(shí)小于等于 0 時(shí)清除定時(shí)器,按鈕恢復(fù)為“發(fā)送驗(yàn)證碼”,否則顯示為“X秒后重試”
效果圖:

實(shí)現(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(){     // 計(jì)時(shí)開始     var that = this;      this.disabled=true;      timer = setInterval(function(){        times --;        that.value = times + "秒后重試";        if(times <= 0){          that.disabled =false;          that.value = "發(fā)送驗(yàn)證碼";          clearInterval(timer);          times = 60;        }        //console.log(times);      },1000);      }    }   </script></head><body>  <input type="button" id="send" value="發(fā)送驗(yàn)證碼"></body></html>注意點(diǎn):
設(shè)置按鈕是否為禁用時(shí),send.disabled=true; send.disabled=false;
true和false不能加引號(hào)!true和false不能加引號(hào)!true和false不能加引號(hào)!否則值永遠(yuǎn)為真。 
也可用send.setAttribute('disabled','disabled');
或send.removeAttribute('disabled');
以上就是為大家分享的javascript發(fā)送短信驗(yàn)證碼全部代碼,希望對(duì)大家的學(xué)習(xí)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注