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

2017-03-13  本文已影响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);
});

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

上一篇下一篇

猜你喜欢

热点阅读