button设置倒计时

最新推荐文章于 2023-11-03 11:08:40 发布

loshirleyve

最新推荐文章于 2023-11-03 11:08:40 发布

阅读量515

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签：小函数

本文链接：https://blog.csdn.net/loshirleyve/article/details/74820436

web前端专栏收录该内容

12 篇文章

订阅专栏

function setBtnTimeout(btn){
        if(btn.hasClass("clicked")){
            return;
        }
        btn.addClass("clicked");
        setTimeout && clearInterval(setTimeout);
        var num = 60;
        btn.find("span").text(num-- + '秒后再获取');
        var setTimeout = setInterval(function(){
            if(num > 0){
                btn.find("span").text(num-- + '秒后再获取');
            }else {
                btn.removeClass("clicked");
                clearInterval(setTimeout);
                btn.find("span").text('获取验证码');
            }
        }, 1000);
    }

使用

<div class="code">
                <label for="codeInput">
                    <span>验证码</span>
                    <input id="codeInput" type="text" placeholder="请输入验证码">
                </label>
                <button><span>获取验证码</span></button>
            </div>

button{
        font-family: PingFangSC-Light;
        font-size: 15px;
        color: #FF8F3B;
        padding-top: 16/@unit;
        padding-bottom: 16/@unit;
        background: transparent;
        position: absolute;
        right: 0;
        border: none;
        span{
          display: inline-block;
          padding: 10/@unit 30/@unit;
          border-left: 1px solid #FF8F3B;
        }
        &.clicked{
          background: #DCDCDC;
          span{
            border: none;
            color: #c8c7cc;
            padding: 10/@unit 10/@unit;
          }
        }
      }

$(".code").click(function(e){
        var codeBtn = $(this).find("button");
        setBtnTimeout(codeBtn);
    });