导读 在日常开发中，我们经常会用到获取验证码的功能。今天就来分享如何使用jQuery实现这一功能！🔍 通过点击“获取验证码”按钮后，按钮进入倒...
在日常开发中，我们经常会用到获取验证码的功能。今天就来分享如何使用jQuery实现这一功能！🔍 通过点击“获取验证码”按钮后，按钮进入倒计时状态，期间无法重复点击，倒计时结束后恢复可用状态。这不仅能提升用户体验，还能防止恶意频繁请求。
首先，在HTML中定义一个按钮：
```html
```
接着，使用jQuery编写逻辑：
```javascript
$(document).ready(function() {
let countdown = 60; // 倒计时秒数
$("getCodeBtn").on("click", function() {
if ($(this).hasClass("disabled")) return; // 防止重复点击
$(this).addClass("disabled").text(countdown + "秒后重试");
// 开始倒计时
let timer = setInterval(() => {
countdown--;
$(this).text(countdown + "秒后重试");
if (countdown <= 0) {
clearInterval(timer);
$(this).removeClass("disabled").text("重新获取");
}
}, 1000);
});
});
```
最后，记得给按钮添加CSS样式，让“disabled”状态更明显。这样，一个简单的验证码倒计时功能就完成了！✨
💡小提示：实际项目中建议结合后端验证，确保安全性哦！