短信60S倒计时

60s倒计时实现逻辑

var countdown = 60;                                 //定义参数赋予初始秒数
function setTime() {
    if (countdown == 0) {                           //如果时间为0
        $_("btn").disabled = false;              //点击一次按钮禁用60秒后可点击
        $_("btn").innerHTML = "发送验证码";       //按钮提示文字改变
        countdown = 60;                             //60秒过后button上的文字初始化,计时器初始化;
        return;
    } else {                                                //否则
        $_("btn").disabled = true;                       //恢复按钮点击
        $_("btn").innerHTML= ""+countdown+"s后重新发送";  //秒数+默认文字
        $_("btn").style.width = "2.4266666666666667rem"; //按钮加宽
        countdown--;                                        //每过一秒countdown-1
    }
    setTimeout(function() { setTime() },1000) //每1000毫秒执行一次
}

HTML

<!--message短信验证-->
<div class="message">
    <img src="../../images/icon/Short message.Icon.png" alt=""><input type="text" name="message" placeholder="请输入短信验证码" id="message"><button class="fr" id="btn" onclick="setTime()">获取验证码</button>
</div>

CSS

.register .phone,.message,.password{
    width: 8.933333333333334rem;
    height: 1.3333333333333333rem;
    border-bottom: 0.02666666666666667rem   solid #dbdbdb;
}

.register div img{
    margin-left: 0.4266666666666667rem;
}
.register .phone img{
    width: 0.48rem;
    height: 0.48rem;
    margin-top: -0.06666666666666667rem;
}
.register div img{
    margin-left: 0.4266666666666667rem;
}
.register div input{
    width: 4.8rem;
    height: 0.8rem;
    font-size: 0.40rem ;
    line-height: 0.8rem;
    color: #5b5b5b;
    margin-left: 0.3466666666666667rem;
    letter-spacing: 0.02666666666666667rem;
    padding-top: 0.26666666666666666rem;
}
.register .message img{
    width: 0.48rem;
    height: 0.36rem;
    margin-top: -0.12rem;
}
.register .message #btn{
    display: inline-block;
    width: 2.1933333333333334rem;
    height: 0.5333333333333333rem;
    font-size: 0.40rem ;
    line-height: 0.5333333333333333rem;
    text-align: right;
    color: rgb(109, 109, 109);
    border-left: 0.02666666666666667rem solid #dbdbdb;
    background-color: #fff;
    margin-top: 0.4rem;

}