JQ完成發送短信驗證碼/倒計時60S~

2023年10月19日 133次阅读 来源: 四仰八叉的怪
  • 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞