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

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


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

然后是普通样式,类名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);
});

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,246评论 4 61
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,967评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,420评论 25 708
  • 《鼠》 鼠小姐 背上了人人喊打的骂名 尽管Ta 有着圆圆眼睛 和尖尖下巴 这不是 现代微整提倡的标准吗? 同样是潮...
    李寒雪阅读 414评论 1 2
  • 对我来说,高级别的音乐会,是一种奢侈品,它存在于我的日常生活之外。 然而,因了“第二届丝绸之路(敦煌)国际文化博览...
    花雨凤飞H阅读 369评论 4 9