WEB开发之注册页面验证码倒计时代码的实现

WEB开发之注册页面验证码倒计时代码的实现可以通过以下步骤完成。

1. HTML结构

首先，我们需要在HTML中添加一个用于显示倒计时的标签，并为获取验证码的按钮添加一个点击事件，并在点击事件中调用计时器函数。

示例代码：

<div>
    <label for="phone">手机号码：</label>
    <input type="text" name="phone" id="phone" required>
</div>
<div>
    <label for="code">验证码：</label>
    <input type="text" name="code" id="code" required>
    <button type="button" id="btn-get-code">获取验证码</button>
    <span id="code-timer"></span>
</div>

2. JavaScript实现

我们使用JavaScript编写计时器函数，实现倒计时，并在计时器结束时恢复按钮状态。

示例代码：

function countDown() {
    var btnGetCode = document.getElementById('btn-get-code');
    var codeTimer = document.getElementById('code-timer');
    var count = 60; // 设置倒计时时间为60秒
    btnGetCode.disabled = true; // 禁用获取验证码按钮
    btnGetCode.classList.add('disabled'); // 添加禁用样式
    codeTimer.innerText = count + '秒后重新获取';
    var timer = setInterval(function() {
        count--;
        codeTimer.innerText = count + '秒后重新获取';
        if (count <= 0) {
            clearInterval(timer); // 清除计时器
            btnGetCode.disabled = false; // 恢复按钮状态
            btnGetCode.classList.remove('disabled'); // 移除禁用样式
            codeTimer.innerText = ''; // 清空倒计时标签
        }
    }, 1000);
}

在点击获取验证码按钮时，我们需要向后端发送请求来获取验证码，并调用上面的计时器函数来启动倒计时。

示例代码：

var btnGetCode = document.getElementById('btn-get-code');
btnGetCode.addEventListener('click', function() {
    var phone = document.getElementById('phone').value;
    if (!phone) {
        alert('请先填写手机号码');
        return;
    }
    // 发送请求到后端获取验证码
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/api/get_code');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            if (response.code === 0) {
                countDown(); // 启动倒计时
            } else {
                alert(response.message);
            }
        }
    };
    xhr.send('phone=' + phone);
});

3. CSS样式

为了更好的用户体验，我们需要为禁用状态下的按钮和倒计时标签添加样式。

示例代码：

.disabled {
    color: #ccc;
    background-color: #f4f4f4;
    border-color: #ddd;
    cursor: not-allowed;
}