前端：验证码倒计时功能实现

文 / 秦未

HTML：

<input id="mail" class="mail" type="email" name="email" placeholder="Your Mail" required>
<button id="btn-pin" class="btn-pin">获取验证码</button>

jQuery：

$(document).ready(function () {
        let timer;
        function Countdown(obj) {
            if (timer >= 1) {
                obj.attr("disabled", true).text("重新发送(" + timer + ")");
                timer--;
                setTimeout(function () {
                    Countdown(obj);
                }, 1000);
            } else {
                obj.attr("disabled", false).text("重新发送");
            }
        }

        $("#btn-pin").on("click", function () {
            let mail = $("#mail").val();
            if(mail){
                // 向后端发送请求

                // 重新发送倒计时
                timer = 60;
                Countdown(obj=$("#btn-pin"));
            }
        });
    });