JavaScript短信验证码60秒倒计时插件

该插件依赖于jquery,用于发送短信验证码后的60秒倒计时:

JavaScript短信验证码60秒倒计时插件_第1张图片
image

下载完整代码: 下载

下载后的完整实例包括:

JavaScript短信验证码60秒倒计时插件_第2张图片
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. 引入插件


需要依赖jquery

  1. 在"获取验证码"按钮上添加 class="captchaBtn"

ok,使用非常简单

你可能感兴趣的:(JavaScript短信验证码60秒倒计时插件)