本文介绍如何使用JavaScript实现发送验证码后的倒计时功能。通过setTimeout方法控制时间，在指定秒数内禁用发送按钮并修改其显示文本，倒计时结束后恢复按钮可用状态。
JS实现发送验证码倒计时功能
该功能常见于用户注册等场景，旨在实现点击发送验证码后，经过指定的xx秒倒计时，允许用户重新发送。
实现原理是利用JavaScript的setTimeout方法，在设定的xx秒后执行回调函数。回调中修改按钮的属性，当倒计时进行中时，将按钮的disabled属性设为true，使按钮呈现灰色且不可点击状态。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>-->
<script type="text/javascript">
var countdown=60;
function settime(obj) {
if (countdown == 0) {
obj.removeAttribute("disabled");
obj.value="获取验证码";
countdown = 60;
return;
} else {
obj.setAttribute("disabled", true);
obj.value="重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function() {
settime(obj);
}
,1000);
}
</script>
<body>
<label>
<input type="text" name="textfield">
</label>
<input type="button" id="btn" value="获取验证码" onclick="settime(this)" />
</body>
</html>总结
以上介绍了利用JavaScript实现发送验证码倒计时及按钮重新发送的功能，希望能为读者提供帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！ 如果觉得本文对您有帮助，欢迎转载，请注明出处，谢谢！