美文网首页
jquery短信验证码倒计时效果

jquery短信验证码倒计时效果

作者: wangzaiplus | 来源:发表于2017-08-26 11:00 被阅读0次

1. 点击发送短信验证码

    $("#sendSms").click(function(){
        countdown(this);
        var phone = $.trim($("#phoneNumber").val());
        $.post("/phoneRegister",{phone: phone},
            function(data, status){
                if(data == "SUCCESS"){
                    /* alert("验证码已发送"); */
                }else{
                    alert("发送失败,请重试");
                }
        });
    });
  1. 按钮点击后禁用及倒计时60s
    var timeWait = 60;
    $("#sendSms").attr("disabled", false);
    function countdown(o){
        if(timeWait == 0){
            o.removeAttribute("disabled");
            o.innerHTML = "点击获取验证码";
            timeWait = 60;
        }else{
            o.setAttribute("disabled", true);
            o.innerHTML = timeWait + "秒后重新获取"; 
            timeWait--;
            setTimeout(function() {
                countdown(o)
            },1000)
        }
    }

相关文章

网友评论

      本文标题:jquery短信验证码倒计时效果

      本文链接:https://www.haomeiwen.com/subject/eeymdxtx.html