JS如何實現發送短信驗證后按鈕倒計時功能

這篇文章給大家分享的是有關JS如何實現發送短信驗證后按鈕倒計時功能的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

js有什么特點

1、js屬于一種解釋性腳本語言；2、在絕大多數瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數據類型未做出嚴格的要求，能夠進行類型轉換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現信息瀏覽或動態交互，從而有效地防止數據的丟失；5、基于對象的腳本語言，js不僅可以創建對象，也能使用現有的對象。

應用場景

在開發“發送短信驗證”功能時候，要解決一個問題，防止惡意或頻繁發送短信驗證碼問題。一般原理是“當點擊發送按鈕時，發送ajax請求到服務器發送短信驗證碼，成功則把發送按鈕設置為不可點擊，并且調用定時器，按鈕顯示倒計時”。如果就這樣不對倒計時存儲做處理，那么當刷新頁面，會出現倒計時失效，按鈕可點擊。提供以下解決方案：

• 利用cookie存儲倒計時

• 利用HTML5的localStorage 存儲倒計時

利用cookie存儲倒計時

發送成功后把剩余倒計時存儲到cookie，當頁面刷新時，檢查cookie 是否還存儲著剩余倒計時？，如果有，發送按鈕則保持倒計時狀態，不可點擊，否則發送按鈕可點擊。

HTML代碼

<input type="button" id="btn" disabled="disabled" value="獲取驗證碼">

jQuery代碼

<!--引入jquery.cookie.js 插件-->
<script src="http:jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
<!--邏輯功能代碼 -->
<script>
  $(function(){
   if($.cookie("total")!=undefined&&$.cookie("total")!='NaN'&&$.cookie("total")!='null'){//cookie存在倒計時
     timekeeping();
   }else{//cookie 沒有倒計時
     $('#btn').attr("disabled", false);
   }
   function timekeeping(){
    //把按鈕設置為不可以點擊
    $('#btn').attr("disabled", true);
    var interval=setInterval(function(){//每秒讀取一次cookie
     //從cookie 中讀取剩余倒計時
     total=$.cookie("total");
     //在發送按鈕顯示剩余倒計時
     $('#btn').val('請等待'+total+'秒');
     //把剩余總倒計時減掉1
     total--;
     if(total==0){//剩余倒計時為零，則顯示 重新發送，可點擊
     //清除定時器
     clearInterval(interval);
     //刪除cookie
     total=$.cookie("total",total, { expires: -1 });
     //顯示重新發送
     $('#btn').val('重新發送');
     //把發送按鈕設置為可點擊
     $('#btn').attr("disabled", false);
     }else{//剩余倒計時不為零
     //重新寫入總倒計時
     $.cookie("total",total);
     }
    },1000);
   }
   //綁定發送按鈕
    $('#btn').click(function(event) {
   /* Act on the event */
   // alert($("#btn").val());
   //校驗手機號碼
   var phone=$('#phone').val();
   var pre=/^[1][358][0-9]{9}$/;
   if(phone==''){
     layer.open({
       content: '手機號碼不能為空',
       time: 2
     });
     return this;
   }else{
     var pre=/^[1][358][0-9]{9}$/;
     if(!pre.test(phone)){
      layer.open({
        content: '手機號碼格式有誤！',
        time: 2
      });
       return this;
     }
   }
   $.ajax({
    url: '',//服務器發送短信
    type: 'GET',
    dataType: 'json',
    data: {phone: phone},
   })
   .done(function(re) {
      var str="發送短信驗證碼成功，請注意查看您的手機";
      // console.log(re);
      if(re){
        $.cookie("total",60);
        timekeeping();
      }else{
        switch (re[0]) {
         case '160038':
          str="短信驗證碼發送過頻繁";
          break; 
         case '160034':
          str="號碼黑名單";
          break; 
         case '160000':
          str="系統錯誤";
          break;
         case '000000':
          str="發送成功";
          break;
         case '112300':
          str="接收短信的手機號碼為空";
          break; 
         case '160040':
          str="驗證碼超出發送上限";
          break;
         case '160042':
          str="號碼格式有誤";
          break; 
         default:
          str="發送驗證碼失敗";
          break;
        }
      }
      layer.open({
         content: str,
         time: 2
       });
   })
   .fail(function() {
    console.log("error");
   })
   .always(function() {
    console.log("complete");
   });
  });
  })
</script>

感謝各位的閱讀！關于“JS如何實現發送短信驗證后按鈕倒計時功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！