使用Jquery发送验证码倒计时60秒限制
时间: 2024-01-03 11:04:57 浏览: 29
好的,以下是一个简单的示例代码,可以使用jQuery发送验证码并倒计时60秒:
HTML:
```html
<input type="text" id="phone" placeholder="请输入手机号码"/>
<button id="send-code">获取验证码</button>
```
JavaScript:
```javascript
$(document).ready(function() {
var count = 60; //倒计时初始值
var countdownTimer; //倒计时定时器
// 点击“获取验证码”按钮
$("#send-code").click(function() {
var phone = $("#phone").val();
if (phone == "") {
alert("请输入手机号码");
return;
}
// 发送验证码的逻辑
$.ajax({
url: "send_code.php",
type: "POST",
data: {
phone: phone
},
success: function(response) {
if (response == "success") {
// 发送成功,开始倒计时
startCountdown();
} else {
alert("发送失败,请稍后重试");
}
},
error: function() {
alert("发送失败,请稍后重试");
}
});
});
// 开始倒计时
function startCountdown() {
count = 60;
$("#send-code").prop("disabled", true);
countdownTimer = setInterval(function() {
count--;
if (count <= 0) {
clearInterval(countdownTimer);
$("#send-code").prop("disabled", false).html("获取验证码");
} else {
$("#send-code").html("重新发送(" + count + ")");
}
}, 1000);
}
});
```
这段代码将会在用户点击“获取验证码”按钮之后,发送一个 AJAX 请求到 `send_code.php` 页面,然后开始倒计时60秒。在倒计时期间,按钮会显示当前倒计时的秒数,直到倒计时结束。如果用户在倒计时期间再次点击“获取验证码”按钮,该按钮将会被禁用,直到倒计时结束。