- 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部分代码,方便下次己用,供小白参考(侵删~)