JQuery - 获取验证码倒计时 60 秒功能示例源码，普通 html + jq 项目下实现手机号与验证码登录（完整代码及注释，适用于手机号 + 验证码登录的系统）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证码倒计时示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="button" id="getVerification" value="获取验证码" />
<input type="text" id="verificationCode" placeholder="输入验证码" />
<script>
$(document).ready(function(){
var timeLeft = 60;
$('#getVerification').click(function(){
// 这里可以添加发送验证码到手机的逻辑
alert('验证码已发送！');
// 更新按钮状态，禁用并显示倒计时
$(this).attr('disabled', true);
$(this).val("重新发送(" + timeLeft + ")");
// 倒计时逻辑
var timer = setInterval(function() {
timeLeft--;
if(timeLeft >= 0){
$('#getVerification').val("重新发送(" + timeLeft + ")");
} else {
clearInterval(timer);
$('#getVerification').val("获取验证码").attr('disabled', false);
}
}, 1000);
});
});
</script>
</body>
</html>这段代码实现了获取验证码时的倒计时功能。用户点击"获取验证码"按钮后，按钮变为不可点击状态，并显示倒计时。倒计时结束后，按钮恢复可点击状态。这是一个简单的示例，实际应用中需要根据项目需求进行必要的调整和扩展。
评论已关闭