60s倒计时获取验证码

最新推荐文章于 2024-07-20 21:16:51 发布

烟火缠过客

最新推荐文章于 2024-07-20 21:16:51 发布

阅读量415

点赞数

文章标签： java

本文链接：https://blog.csdn.net/LuckFairyLuckBaby/article/details/98178166

版权

1.效果

<div class="form-group">
                <div class="row">
                    <div class="col-xs-6 col-sm-7 col-md-7 col-lg-7">
                        <input type="text"  id="code" name="code" class="form-control" placeholder="验证码">
                    </div>
                    <div class="col-xs-6 col-sm-5 col-md-5 col-lg-5">
                        <button type="button" class="btn btn-info"  id="codeBtn" onclick="InfoComplete.getShortMessage()">获取验证码</button>
                    </div>
                </div>
            </div>
            <button id="btn-test" name="submit" style="width: 280px;display: block;width: 80%;margin: 0 auto;" onclick="InfoComplete.doSubmitForm()" class="btn btn-primary">提交</button>

3.代码


/**
 * 获取短信验证码
 */
InfoComplete.getShortMessage = function () {
    //当上面的信息填写完整后，
   var time = 60;   //定义重新发送验证码的时间
   var flag = true; //设置点击标记，防止60s内再次点击生效
    //添加新的class属性，点击之后改变按钮为不可点击
    $("#codeBtn").attr("disabled",true);
    var phone = $("#phone").val();
    if(flag){
        var timer = setInterval(function () {
            if(time == 60 && flag){
                flag = false;
                $.ajax({
                    type: 'post',
                    async: false,
                    url: '/netcard/qrcode/getShortMessage',
                    data: {"phone":phone},
                    dataType: "json",
                    success: function (data) {
                        //我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
                        var json = JSON.parse(data);
                        var code = json.return_code;
                        var message = json.return_msg;
                        if(code == "0004"){
                            //短信发送成功
                            $("#codeBtn").html("发送成功");
                        }else{
                            confirm(message);
                            $("#codeBtn").removeAttr("disabled");
                            $("#codeBtn").html("获取验证码");
                            clearInterval(timer);
                        }
                    },
                    error:function (data) {
                        //我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
                        alert("发送失败!" + data.responseJSON.message);
                    }
                });
            }else if(time == 0){
                $("#codeBtn").removeAttr("disabled");
                $("#codeBtn").html("获取验证码");
                clearInterval(timer);
            }else{
                $("#codeBtn").html(time + "s 后重新发送");
                time--;
            }
        },1000);
    }