JQ實現發送短信驗證碼/倒計時60S~

• 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部分代碼,方便下次己用,供小白參考(侵刪~)