使用jQuery实现手机验证码倒计时效果，可通过点击按钮触发倒计时，防止重复发送，核心逻辑为：绑定点击事件后，禁用按钮并启动定时器，每秒更新剩余秒数（如60秒倒计时），倒计时结束后恢复按钮状态并启用点击，此方案无需后端配合，纯前端实现，代码简洁，通过jQuery的$(this)快速操作按钮文本与状态，提升用户体验，适用于注册、登录等需验证码的场景。
jQuery实现免费获取手机验证码倒计时效果（附完整代码）
在移动端应用和网站开发中，手机验证码已成为用户身份验证的重要手段，广泛应用于注册、登录、密码重置、支付确认等多个场景，为了提升用户体验并防止恶意请求，实现一个完善的验证码获取倒计时功能至关重要，本文将详细介绍如何使用jQuery轻松实现这一功能，无需依赖任何第三方付费服务,完全免费且易于集成到您的项目中。
准备工作
在开始实现之前,我们需要做好以下准备工作：
引入jQuery库
确保您的项目中已正确引入jQuery库，推荐使用CDN方式引入,这样可以利用缓存加速加载：
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/jquery.min.js"></script>
提示：如果您有特定的jQuery版本需求，可以替换上述链接中的版本号，对于生产环境,建议使用稳定版本而非最新测试版。
基础HTML结构
创建包含手机号输入框、验证码获取按钮及相关表单元素的基本结构：
<div class="verify-container">
<input type="tel" id="phone" placeholder="请输入手机号" maxlength="11" autocomplete="off">
<button id="getVerifyCode" class="verify-btn">获取验证码</button>
<input type="text" id="code" placeholder="请输入验证码" autocomplete="off">
<div id="message" class="message"></div>
</div>
完整实现步骤
HTML结构设计
设计一个简洁而功能完整的表单结构,包含必要的输入元素和交互按钮：
<div class="verify-container">
<input type="tel" id="phone" placeholder="请输入手机号" maxlength="11" autocomplete="off">
<button id="getVerifyCode" class="verify-btn">获取验证码</button>
<input type="text" id="code" placeholder="请输入验证码" autocomplete="off">
<div id="message" class="message"></div>
</div>
提示：添加autocomplete="off"属性可以防止浏览器自动填充,提高表单控制的准确性。
CSS样式美化
为表单元素添加美观的样式,并定义倒计时期间的禁用状态样式：
.verify-container {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 320px;
margin: 20px auto;
padding: 20px;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.verify-container input {
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
transition: border-color 0.3s;
}
.verify-container input:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
.verify-btn {
padding: 12px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.verify-btn:hover:not(:disabled) {
background-color: #0056b3;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}
.verify-btn:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}
.verify-btn:disabled {
background-color: #6c757d;
cursor: not-allowed;
opacity: 0.7;
}
.message {
min-height: 20px;
font-size: 13px;
color: #dc3545;
margin-top: 5px;
display: none;
}
@media (max-width: 480px) {
.verify-container {
margin: 10px;
padding: 15px;
}
}
提示：添加了响应式设计，确保在移动设备上有良好的显示效果，同时增加了交互反馈，如按钮悬停和点击效果,提升用户体验。
jQuery逻辑实现
以下是完整的jQuery实现代码，包含手机号验证、倒计时功能和模拟发送验证码：
$(document).ready(function() {
let countdown = 60; // 倒计时初始秒数
let timer = null; // 存储定时器对象
let isCounting = false; // 标记是否正在倒计时
// 显示消息提示
function showMessage(text, isError = true) {
const $message = $("#message");
$message.text(text).show();
if (isError) {
$message.css("color", "#dc3545");
} else {
$message.css("color", "#28a745");
}
// 3秒后自动隐藏消息
setTimeout(function() {
$message.fadeOut();
}, 3000);
}
// 点击"获取验证码"按钮
$("#getVerifyCode").click(function() {
const phone = $("#phone").val().trim();
// 1. 手机号格式验证
if (!phone) {
showMessage("请输入手机号！");
return;
}
if (!/^1[3-9]\d{9}$/.test(phone)) {
showMessage("请输入正确的11位手机号！");
return;
}
// 2. 检查是否正在倒计时
if (isCounting) {
return;
}
// 3. 模拟发送验证码（实际项目中应通过AJAX请求后端接口）
$.ajax({
url: "/api/sendVerificationCode", // 替换为实际后端接口
type: "POST",
data: {
phone: phone,
type: "register" // 可以是register、login、reset等
},
dataType: "json",
success: function(response) {
if (response.success) {
showMessage("验证码已发送至您的手机", false);
startCountdown();
} else {
showMessage(response.message || "发送失败，请重试");
}
},
error: function(xhr, status, error) {
showMessage("网络错误，请稍后重试
