发送验证码倒计时

最新推荐文章于 2023-09-20 14:40:20 发布

原创最新推荐文章于 2023-09-20 14:40:20 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用jQuery实现的验证码倒计时功能。通过点击按钮触发倒计时，并禁用按钮防止重复点击，直至倒计时结束。此功能适用于网站注册验证等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>发送验证码</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<input type="number">
<button type="button" id="getPhoneCode">获取手机验证码</button>
<script>
$(function(){
$('#getPhoneCode').click(function(){
settime($("#getPhoneCode"),60);
})
});

function settime($obj, time) {
if (time == 0) {
$obj.attr("disabled", false);
/*$obj.css("background", "#f38401").css("cursor", "pointer");*/
$obj.text("获取手机验证码");
return;
} else {
$obj.attr("disabled", true);
/*$obj.css("background", "#ccc").css("cursor", "not-allowed");*/
$obj.text("重新发送(" + time + ")");
time--;
}
setTimeout(function () { settime($obj, time) }, 1000)
}
</script>
</body>
</html>