美文网首页
[js]验证码重新发送按钮效果,点击后一段时间后再启用

[js]验证码重新发送按钮效果,点击后一段时间后再启用

作者: 咸鱼菠菜 | 来源:发表于2017-03-13 15:46 被阅读0次

    首先按钮基础的样式为灰色底:


    基础样式(也就是禁用下的状态)

    然后是普通样式,类名rgs-get-code ,同id:

    可点击状态

    js部分:

    $('#rgs-get-code').on('click', function() {
        var _this = this;
        var loopTime = 59;
        // 修改样式
        $(_this).prop('disabled', true).removeClass('aui-btn-warning').html('重新获取(60s)');
        // 定时器
        var countDown = setInterval(function() {
            if (loopTime == 0) {
                $(_this).prop('disabled', false).addClass('aui-btn-warning').html('获取验证码');
                // 清除定时器
                window.clearInterval(countDown);
            }else {
                $(_this).html('重新获取(' + loopTime + 's)');
                loopTime -= 1;
            }
        }, 1000);
    });
    

    其实是灰常简单的一个功能,不过定时器要及时清除。

    相关文章

      网友评论

          本文标题:[js]验证码重新发送按钮效果,点击后一段时间后再启用

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