快捷導(dǎo)航

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

更新時(shí)間：2015年11月12日 09:46:49 投稿：lijiao

我們?cè)谧?cè)賬號(hào)，或者是參加活動(dòng)時(shí)，都會(huì)向手機(jī)發(fā)送收短信驗(yàn)證碼，短信驗(yàn)證碼到底是如何實(shí)現(xiàn)的，本文為大家揭曉，并為大家分項(xiàng)1javascript發(fā)送短信驗(yàn)證碼實(shí)現(xiàn)代碼，感興趣的小伙伴們可以參考一下

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

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)聊天室功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)聊天室功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
前端vue完全銷毀一個(gè)組件的簡(jiǎn)單步驟
組件銷毀有很多種情況比如頁面關(guān)閉,路由跳轉(zhuǎn)(沒有使用keep-alive時(shí)的路由切換）,這篇文章主要介紹了前端vue完全銷毀一個(gè)組件的簡(jiǎn)單步驟,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下
2025-04-04
實(shí)現(xiàn)JavaScript中數(shù)據(jù)響應(yīng)的方法總結(jié)
JavaScript 數(shù)據(jù)響應(yīng)是一種重要的前端開發(fā)概念,是指在應(yīng)用程序中的數(shù)據(jù)發(fā)生變化時(shí),能夠自動(dòng)更新與這些數(shù)據(jù)相關(guān)的用戶界面（UI）部分的能力,本文我們來總結(jié)一下目前可以簡(jiǎn)單實(shí)現(xiàn) JavaScript 中的數(shù)據(jù)響應(yīng)的方法,需要的朋友可以參考下
2023-09-09
關(guān)于javascript中this關(guān)鍵字(翻譯+自我理解)
在傳統(tǒng)面向?qū)ο笳Z言中，this關(guān)鍵字是個(gè)很乖的小孩，從不亂跑，該是誰的就是誰的?？墒窃贘avaScript中，我們發(fā)現(xiàn)它不那么乖，有時(shí)甚至把我們搞的暈頭轉(zhuǎn)向的。所以有必要對(duì)它稍微做個(gè)總結(jié)。
2010-10-10
JavaScript 反科里化 this [譯]
本文主要講了JavaScript中科里化和反科里化this的方法.話題來自于Brendan Eich(JavaScript之父)的一個(gè)tweet
2012-09-09
ES6所改良的javascript“缺陷”問題
這篇文章主要介紹了ES6所改良的javascript“缺陷”問題的相關(guān)資料,需要的朋友可以參考下
2016-08-08
javascript 常用方法總結(jié)
javascript 常用方法，比較不錯(cuò)大家可以參考下。
2009-06-06
swiper實(shí)現(xiàn)異形輪播效果
這篇文章主要為大家詳細(xì)介紹了swiper實(shí)現(xiàn)異形輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11
兩種JavaScript的AES加密方式（可與Java相互加解密）
這篇文章主要介紹了兩種JavaScript的AES加密方式（可與Java相互加解密）的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
在 JavaScript 中用下劃線替換空格的方法
這篇文章主要介紹了在 JavaScript 中用下劃線替換空格的方法,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-05-05