发送验证码倒计时

点击发送验证码按钮的时候 会调用ajax请求发送验证码

但是 如果没有设置倒计时 如果一直重复点击按钮的话 会一直请求发送验证码 所以我们要设置一个验证码倒计时

 <input id="sendCodeId" type="button" class="btn btn-danger" @click="sendCode" value="发送验证码"/>

这个是前端代码 当点击 发送验证码 触发点击事件 sendcode

 sendCode:function(){
            var _this =this;
            var url = "user/UserRewardRecord_code.do";
            $.ajax({
                type: "POST",
                url: baseURL + url,
                data: vm.reward,
                success: function (r) {
                    if (r.success) {
                        $.jGrowl("发送成功,请输入验证码");
                       vm.reward.businessId = r.data;
                    } else {
                        $.jGrowl("操作失败:"+r.data);
                    }
                }
            });

点击按钮直接调用后台接口发送验证码 所以我们要设置验证码过期时间

在vue的data里面设置

 InterValObj:null,//timer变量，控制时间
        count : 60, //间隔函数，1秒执行
        curCount:null,//当前剩余秒数

然后再sendcode 这个函数里面

 sendCode:function(){
            curCount = this.count;
            document.getElementById("sendCodeId").setAttribute(
                'disabled',"true"
            );
            document.getElementById("sendCodeId").value=curCount+"秒后重获";
            this.InterValObj = window.setInterval( this.SetRemainTime, 1000); // 启动计时器timer处理函数，1秒执行一次
            var _this =this;
            var url = "user/UserRewardRecord_code.do";
            $.ajax({
                type: "POST",
                url: baseURL + url,
                data: vm.reward,
                success: function (r) {
                    if (r.success) {
                        $.jGrowl("发送成功,请输入验证码");
                       vm.reward.businessId = r.data;
                    } else {
                        $.jGrowl("操作失败:"+r.data);
                    }
                }
            });
        },

通过id设置disabled 让这个按钮不可以再去点击 设置其内容值

document.getElementById("sendCodeId").value=curCount+"秒后重获";

然后启用定时器

    SetRemainTime:function (){
            if (curCount == 0) {//超时重新获取验证码
                window.clearInterval(this.InterValObj);// 停止计时器
                document.getElementById("sendCodeId").removeAttribute("disabled");//移除禁用状态改为可用
                document.getElementById("sendCodeId").value="重获验证码";
            }else {
                curCount--;
                document.getElementById("sendCodeId").value=curCount+"秒后重获";
            }
        },

 通过调这个函数 就可以达到验证码倒计时了

当60秒过后 disabled属性 remove

后端代码

就是 设置一个验证按过期时间

新增字段 来判断