0
点赞
收藏
分享

微信扫一扫

【前端】短信验证码定时器

斗米 2022-03-15 阅读 48
 //短信发送
    $('.vcode-send').click(function () {
        /*发送前端验证码按钮变化*/
        if ($(this).hasClass('disabled')) {

        } else {
            var self = $(this);
            var count = 10;
            self.addClass('disabled');
            self.text(count + '秒后重新获取');

// 定时器在这
            var timer = setInterval(function () {
                count--;
                if (count > 0) {
                    self.text(count + '秒后重新获取');
                } else {
                    clearInterval(timer);
                    self.text('重新获取验证码');
                    self.removeClass("disabled");
                }
            }, 1000);
            /*1秒= 1000ms*/

            /*后端搞验证码,确认成功*/
            var phone = $("#phone").val();
            $.get(domainUrl + "/users/sendVerifyCode", {phone:phone}, function (data) {
                /*后端: 造验证码,发短信,指定phone用Redis缓存code,返回Json成功!*/
                console.log(data);
                if(data.code === 200){
                    popup("发送成功")
                }else{
                    popup(data.msg);
                }
            })
        }
    });

定时器叫setInterval

①count设定好了看上几行var count = 10;然后count--就是循环一次-1秒就是十九八七到零

②只要没数到0就一直倒数, 那个获取短信验证码的按钮就是灰色点不了

③等计到0了就恢复,但是建议设60秒

④结尾这个1000是ms , 1秒=1000ms , 意思就是每次循环count都减去1秒

举报

相关推荐

0 条评论