JQ实现发送短信验证码/倒计时60S~

2024年4月4日 147次阅读 来源: 四仰八叉的怪
  • html部分
<input type="button" class="gainCodeBtn" value="立即获取" onclick="settime(this)" />
  • css部分
.gainCodeBtn{
    background-color: #ff4646;
    color: #ffffff;
    border: none;
    font-size: 1rem;
    letter-spacing: 0.1rem;
    height: 1.8rem;
    line-height: 1.8rem;
    border-radius: 0.6rem;
}
input[type="button" i]:disabled, input[type="submit" i]:disabled, input[type="reset" i]:disabled, input[type="file" i]:disabled::-webkit-file-upload-button, button:disabled, select:disabled, optgroup:disabled, option:disabled, select[disabled] > option {
    color: graytext;
}
input:disabled, textarea:disabled {

    cursor: default;
    background-color:#cecece;
}

input[type="button" i], input[type="submit" i], input[type="reset" i] {
    -webkit-appearance: push-button;
    user-select: none;
    white-space: pre;
}
input, textarea, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb !important;
}

  • js部分

    • 注意此处要自行引入jquery
      
<!--发送验证码-->
<script>
    //倒计时
    var countdown=60;
    function settime(val) {
if (countdown == 0) {
    val.removeAttribute("disabled");
    val.value="立即获取";
    countdown = 60;
    return false;
} else {
    val.setAttribute("disabled", true);
    val.value="还剩" + countdown + "s";
    countdown--;
}
setTimeout(function() {
    settime(val);
},1000);
    }

</script>

发布于阅读原博:https://blog.csdn.net/hj7jay/… 之后,补充了css部分代码,方便下次己用,供小白参考(侵删~)

    原文作者：四仰八叉的怪
    原文地址: https://segmentfault.com/a/1190000014403588
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞