javascript發(fā)送短信驗(yàn)證碼實(shí)現(xiàn)代碼

2019-11-20 11:17:22

字體：大中小

供稿：網(wǎng)友

本文首先分析手機(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í)有所幫助。

上一篇：javascript伸縮菜單欄實(shí)現(xiàn)代碼分享

下一篇：javascript倒計(jì)時(shí)效果實(shí)現(xiàn)