美文网首页
获取验证码倒计时前端效果

获取验证码倒计时前端效果

作者: 风度翩翩的程序猿 | 来源:发表于2020-11-12 15:06 被阅读0次

在我们开发过程中,很多登录或者注册,都会有获取手机验证码的功能,但是这个功能要有倒计时,60秒一轮回

直接上代码吧,很简单的 jq

function code(obj) {
    obj = obj || $("input[type=button]");
    var num = 60;
    var timer = setInterval(function () {
        if (num > 1) {
            num--;
            obj.val("重新发送(" + num + ")").attr("disabled", "disabled");
            obj.css('background', '#B8B8B8');
        } else {
            obj.val("获取验证码").removeAttr("disabled");
            obj.css('background', '#435E97');
            clearInterval(timer);
        }
    }, 1000)
};

效果图如下
![S]P(VG3@A({25AYI5$E0Y4Y.png](https://img.haomeiwen.com/i19228194/764076233a0409d9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

相关文章

网友评论

      本文标题:获取验证码倒计时前端效果

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