js实现验证码倒计时

验证码倒计时是一种常见的安全措施，用于防止用户频繁点击发送验证码按钮，从而减少恶意请求和提高系统的安全性。下面我将详细介绍如何使用JavaScript实现验证码倒计时功能。

基础概念

验证码倒计时通常涉及以下几个概念：

定时器：JavaScript中的setTimeout或setInterval函数用于设置定时任务。
状态管理：需要维护一个变量来记录剩余时间，并在界面上显示。
事件监听：监听按钮的点击事件，触发倒计时开始。

实现步骤

HTML结构：创建一个按钮用于发送验证码，并显示倒计时。
JavaScript逻辑：编写脚本处理倒计时逻辑。

示例代码

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码倒计时</title>
</head>
<body>
    <button id="sendCodeBtn">发送验证码</button>
    <script src="countdown.js"></script>
</body>
</html>

JavaScript部分（countdown.js）

document.addEventListener('DOMContentLoaded', function() {
    const sendCodeBtn = document.getElementById('sendCodeBtn');
    let countdown = 60; // 初始倒计时时间，单位秒
    let timer = null;

    function startCountdown() {
        sendCodeBtn.disabled = true;
        sendCodeBtn.textContent = `${countdown}秒后重试`;

        timer = setInterval(() => {
            countdown--;
            sendCodeBtn.textContent = `${countdown}秒后重试`;

            if (countdown <= 0) {
                clearInterval(timer);
                sendCodeBtn.disabled = false;
                sendCodeBtn.textContent = '发送验证码';
                countdown = 60; // 重置倒计时
            }
        }, 1000);
    }

    sendCodeBtn.addEventListener('click', startCountdown);
});