快捷導(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)文章

利用layer實(shí)現(xiàn)表單完美驗(yàn)證的方法
今天小編就為大家分享一篇利用layer實(shí)現(xiàn)表單完美驗(yàn)證的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
微信小程序 wx.login解密出現(xiàn)亂碼的問題解決辦法
這篇文章主要介紹了微信小程序 wx.login解密出現(xiàn)亂碼的問題解決辦法的相關(guān)資料,需要的朋友可以參考下
2017-03-03
JS實(shí)現(xiàn)在狀態(tài)欄顯示打字效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)在狀態(tài)欄顯示打字效果的方法,涉及JavaScript中字符遍歷結(jié)合時(shí)間函數(shù)對(duì)狀態(tài)欄顯示進(jìn)行操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11
javascript代碼壓縮工具的原理
JavaScript代碼壓縮對(duì)代碼進(jìn)行一系列優(yōu)化處理,從而減小代碼的體積,提高網(wǎng)頁的加載速度,JavaScript代碼壓縮的原理包含去除代碼中的空格、注釋、不必要的換行符等無用字符,壓縮變量名、壓縮函數(shù)名等操作,將一些常見的操作(如+、-、*、/)轉(zhuǎn)換成更短的操作符(如@、^、#、|)
2023-12-12
JavaScript導(dǎo)航腳本判斷當(dāng)前導(dǎo)航
這篇文章主要介紹了JavaScript導(dǎo)航腳本判斷當(dāng)前導(dǎo)航的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07
深入理解javascript prototype的相關(guān)知識(shí)
這篇文章主要介紹了深入理解javascript prototype的相關(guān)知識(shí),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
layui監(jiān)聽單元格編輯前后交互的例子
今天小編就為大家分享一篇layui監(jiān)聽單元格編輯前后交互的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
詳解如何使用JavaScript中Promise類實(shí)現(xiàn)并發(fā)任務(wù)控制
在JavaScript中,Promise是一種用于管理異步操作的強(qiáng)大工具,但是,有時(shí)候需要更高級(jí)的控制,以限制同時(shí)執(zhí)行的任務(wù)數(shù)量,以避免系統(tǒng)資源超負(fù)荷,本文將深入探討JavaScript中的并發(fā)任務(wù)控制,并介紹如何創(chuàng)建一個(gè)自定義的Promise類——ConcurrentPromise
2023-08-08
關(guān)于前后端json數(shù)據(jù)的發(fā)送與接收詳解
這篇文章主要給大家介紹了關(guān)于前后端json數(shù)據(jù)發(fā)送與接收的相關(guān)資料，文中通過示例代碼詳細(xì)介紹了關(guān)于flask中的json數(shù)據(jù)接收和前端發(fā)送json數(shù)據(jù)等內(nèi)容，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-07-07
ajax在js中和jQuery中的用法實(shí)例詳解
Ajax被認(rèn)為是(Asynchronous(異步) JavaScript And Xml的縮寫）,現(xiàn)在允許瀏覽器與服務(wù)器通信而無須刷新當(dāng)前頁面的技術(shù)都被叫做Ajax,下面這篇文章主要給大家介紹了關(guān)于ajax在js中和jQuery中的用法,需要的朋友可以參考下
2021-08-08