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

html部分

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

//倒计时

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);

}

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