专栏首页前端开发随笔jQuery实现验证码倒计时

jQuery实现验证码倒计时

 <input type="button" class="code" value="获取验证码">
 $('.code').click(function () {
        let count = 60;
        const countDown = setInterval(() => {
            if (count == 0) {
                $('.code').val('重新发送').removeAttr('disabled');
                $('.code').css('background', '#116750');
                clearInterval(countDown);
            } else {
                $('.code').attr('disabled', true);
                $('.code').css('background', '#A9A9A9');
                $('.code').val('(' + count + '秒)后获取');
            }
            count--;
        }, 1000);
    })

一定要用input标签,用div设置disabled是无效的

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue页面中引用自定义组件

    比如我想引用一个外部的头部导航的组件,因为这个导航在很多地方都用到,避免每个页面都写一遍 首先 我先在components这里创建一个navmenu的组件

    wePanda
  • jQuery判断input框的值

    wePanda
  • 微信小程序封装api接口

    wePanda
  • spring-data-mongodb之Aggregation

    这篇文章主要介绍下在data框架中如何使用Aggregation进行分组统计。 基本的操作包括: $project - 可以从子文档中提取字段,可以重命名字段。...

    猿天地
  • 云存储能给你带来什么

    现在的我们逐渐开始转向在云端之中生活,不管什么事,什么运用,凡是粘个云就显得格外高大上。 在云时代,人类与云的距离不再需要仰望天空,只用鼠标轻点指尖滑动。云端之...

    企鹅号小编
  • 碎片化 | 第四阶段-42-校验验证码-视频

    如清晰度低,可转PC网页观看高清版本: http://v.qq.com/x/page/b0567trsukm.html ---- ---- 版权声明:本视频...

    码神联盟
  • 区块链加上云存储,能玩出什么花样?

    一夜之间硬盘会坏掉,网站也会倒闭,难道就没有一个数据安全存储的地方吗?当然是有的! 当云存储首次出现时,被誉为革命性的,即使在今天的技术革命中,它仍然发挥着作用...

    企鹅号小编
  • 1-学习STM32+WIFI(STM32+WIFI开发板介绍)

    杨奉武
  • 自学鸿蒙应用开发(16)- ListContainer

    在layout目录下的xml文件中创建ListContainer布局,将其命名为page_listcontainer.xml。

    面向对象思考
  • zabbix清空历史记录

    -----------------------------------------------------------------------

    拓荒者

扫码关注云+社区

领取腾讯云代金券