基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)

让我们来详细讲解一下“基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)”的完整攻略。

一、技术栈

在本文中，我们会用到以下几种技术：

HTML：用来构建页面结构
CSS：用来美化页面样式
jQuery：用来操作页面元素和实现倒计时功能

二、实现步骤

1. 编写HTML页面结构

首先，我们需要编写一个HTML页面结构，以便于后续的jQuery来操作和实现倒计时功能。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时Demo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="wrapper">
        <input type="text" placeholder="请输入手机号">
        <button class="send-code">发送验证码</button>
        <p class="countdown">60秒后重新发送</p>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

2. 样式美化

接下来，我们需要美化页面的样式，以便于用户体验。

示例代码：

.wrapper {
    width: 300px;
    margin: 100px auto;
    text-align: center;
}

input[type="text"] {
    width: 200px;
    height: 30px;
    border: none;
    outline: none;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 5px;
}

button.send-code {
    width: 200px;
    height: 30px;
    background: #42b983;
    border: none;
    outline: none;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

p.countdown {
    color: #666;
}

3. 实现倒计时功能

现在，我们需要用jQuery来实现倒计时功能了。具体步骤如下：

点击“发送验证码”按钮后，请求后端API发送短信验证码；
如果验证码发送成功，则将按钮禁用，同时开始倒计时60秒；
倒计时结束后，再次启用“发送验证码”按钮。

示例代码：

$(function () {
    // 点击发送验证码按钮
    $('.send-code').on('click', function () {
        // 1. 请求后端API发送短信验证码
        // TODO...

        // 2. 禁用发送验证码按钮
        $(this).attr('disabled', 'disabled');

        // 3. 启动倒计时
        var countdown = 60;
        var timer = setInterval(function () {
            if (countdown <= 0) {
                $('.send-code').removeAttr('disabled').text('发送验证码');
                $('.countdown').hide();
                clearInterval(timer);
            } else {
                $('.countdown').text(countdown + '秒后重新发送').show();
                countdown--;
            }
        }, 1000);
    });
});

完成这段代码后，我们就可以在浏览器中打开页面，点击“发送验证码”按钮，然后就可以看到倒计时效果了。

三、示例说明

示例一

在实际开发中，我们可能需要向后端API发送请求，从而获取到短信验证码。下面是一段示例的代码：

$(function () {
    // 点击发送验证码按钮
    $('.send-code').on('click', function () {
        // 1. 请求后端API发送短信验证码
        $.ajax({
            url: '/api/sendCode',
            type: 'POST',
            dataType: 'json',
            data: {
                phone: $('input[type="text"]').val()
            },
            success: function (res) {
                if (res.status === 200) {
                    alert('验证码发送成功！');
                } else {
                    alert('验证码发送失败，请重试！');
                    $('.send-code').removeAttr('disabled').text('发送验证码');
                    clearInterval(timer);
                }
            },
            error: function () {
                alert('网络错误，请稍后重试！');
                $('.send-code').removeAttr('disabled').text('发送验证码');
                clearInterval(timer);
            }
        });

        // 2. 禁用发送验证码按钮
        $(this).attr('disabled', 'disabled');

        // 3. 启动倒计时
        var countdown = 60;
        var timer = setInterval(function () {
            if (countdown <= 0) {
                $('.send-code').removeAttr('disabled').text('发送验证码');
                $('.countdown').hide();
                clearInterval(timer);
            } else {
                $('.countdown').text(countdown + '秒后重新发送').show();
                countdown--;
            }
        }, 1000);
    });
});

示例二

如果我们需要在页面关闭后也能保持倒计时功能，这时就需要使用HTML5的Web Storage了。Web Storage 提供了两种存储机制：sessionStorage 和 localStorage。其中，sessionStorage 是会话级别的数据存储，数据只存在于当前会话窗口；而 localStorage 则是永久性的数据存储，数据在多个窗口之间共享。

下面是一段示例代码，实现了自动存储倒计时的功能：

$(function () {
    // 点击发送验证码按钮
    $('.send-code').on('click', function () {
        // 1. 请求后端API发送短信验证码
        $.ajax({
            url: '/api/sendCode',
            type: 'POST',
            dataType: 'json',
            data: {
                phone: $('input[type="text"]').val()
            },
            success: function (res) {
                if (res.status === 200) {
                    alert('验证码发送成功！');
                } else {
                    alert('验证码发送失败，请重试！');
                    $('.send-code').removeAttr('disabled').text('发送验证码');
                    clearInterval(timer);
                }
            },
            error: function () {
                alert('网络错误，请稍后重试！');
                $('.send-code').removeAttr('disabled').text('发送验证码');
                clearInterval(timer);
            }
        });

        // 2. 禁用发送验证码按钮
        $(this).attr('disabled', 'disabled');

        // 3. 启动倒计时
        var countdown = localStorage.getItem('countdown') || 60;
        var timer = setInterval(function () {
            if (countdown <= 0) {
                $('.send-code').removeAttr('disabled').text('发送验证码');
                $('.countdown').hide();
                clearInterval(timer);
                localStorage.removeItem('countdown');
            } else {
                $('.countdown').text(countdown + '秒后重新发送').show();
                countdown--;
                localStorage.setItem('countdown', countdown);
            }
        }, 1000);
    });

    // 页面加载时，恢复倒计时
    var countdown = localStorage.getItem('countdown');
    if (countdown && countdown > 0) {
        $('.send-code').attr('disabled', 'disabled');
        $('.countdown').text(countdown + '秒后重新发送').show();
    }
});

到此为止，我们已经完成了“基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)”的相关攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭) - Python技术站

基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)

一、技术栈

二、实现步骤

1. 编写HTML页面结构

2. 样式美化

3. 实现倒计时功能

三、示例说明

示例一

示例二

相关文章