JQuery获取验证码倒计时的简单实现

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

_源

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

阅读量323

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery 文章标签： JQuery 倒计时

本文链接：https://blog.youkuaiyun.com/source_yuan/article/details/99683304

JQuery 专栏收录该内容

3 篇文章

订阅专栏


<input type="text" name="retrieveCode" placeholder="请输入邮箱验证码"/>
<button id="retrieve-code" type="button" class="get-code get-code-hover email-retrieve-code">获取验证码</button>

// 点击事件调用倒计时函数
setTime($('#retrieve-code'), 60);

 /**
 * 点击按钮开始倒计时
 * @param obj 倒计时操作的文档对象
 * @param countdown 倒计时时间
 */
function setTime(obj, countdown) {
    if (countdown == 0) {
        obj.removeProp('disabled');
        obj.addClass('get-code-hover');
        obj.html("获取验证码");
        return;
    } else {
        obj.prop('disabled', 'disabled');
        obj.removeClass('get-code-hover');
        obj.html("重新发送(" + countdown + ")");
        countdown--;
    }
    setTimeout(function() {
        setTime(obj, countdown);
    }, 1000)
};

当点击获取验证码按钮时，调用setTime函数，其中第一个参数表示需要被操作的文档对象，第二个参数代表倒计时的时间，当开始倒计时一直到倒计时结束前这段时间，必须设置按钮为不可点击状态，倒计时结束后，将其恢复到可点击状态。