JavaScript短信驗證碼60秒倒計時插件

該插件依賴於jquery,用於發送短信驗證碼後的60秒倒計時:

image

下載完整代碼: 下載

下載後的完整實例包括:

image

插件完整源碼

countdown.js:

$(function(){
    $(".captchaBtn").html('獲取驗證碼').on("click", function(){
         var that = $(this);
         var seconds = 60;
         that.attr("disabled", true);
         that.html(seconds+'秒');
         let promise = new Promise((resolve, reject) => {
          let setTimer = setInterval(
            () => {
              seconds -= 1;
              // console.info('倒計時:' + seconds);
              that.html(seconds+'秒');
              if (seconds <= 0) {
                that.html('獲取驗證碼');
                resolve(setTimer)
              }
            }
            , 1000)
        })
        promise.then((setTimer) => {
           // console.info('清除');
          clearInterval(setTimer);
          that.attr("disabled", false);
        })   

    })
});

如何使用

  1. 引入插件
    <script src="jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="countdown.js" type="text/javascript"></script>

需要依賴jquery

  1. 在"獲取驗證碼"按鈕上添加 class="captchaBtn"
    <button class="captchaBtn"></button>

ok,使用非常簡單

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章