JS 发送短信验证码倒计时

上代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
        <title></title>
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
            var countdown = 5;

            function settime(obj) {
                if (countdown == 5) {
                    $.ajax({
                        url: '/sendMemberMsg',
                        type: 'post',
                        data: {
                            mobile: $('#editVipCode').val(),
                            type: $('#type').val()
                        },
                        beforeSend: function() {},
                        success: function(data) {
                            alert("短信发送成功!");
                        },
                        error: function() {
                            alert("服务器异常!");
                        }
                    });

                    obj.setAttribute("disabled", true);
                    obj.value = "重新发送(" + countdown + ")";
                    countdown--;
                } else if (countdown == 0) {
                    obj.removeAttribute("disabled");
                    obj.value = "免费获取验证码";
                    countdown = 5;
                    return;
                } else {
                    obj.setAttribute("disabled", true);
                    obj.value = "重新发送(" + countdown + ")";
                    countdown--;
                }
                setTimeout(function() {
                    settime(obj)
                }, 1000)
            }
        </script>
    <body style="margin: 20px;">
        <div>
            <label>手机号码:</label>
            <input type="number" id="mobile" placeholder="请输入手机号码" maxlength="11" value="18236468976" />
            <input type="hidden" id="type" maxlength="11" value="1" />
        </div>
        <input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" style="margin-top: 20px;" />
    </body>
</html>
View Code

 

感谢:

参考  https://www.jb51.net/article/98285.htm

猜你喜欢

转载自www.cnblogs.com/zhangyinyuan/p/12372073.html