前端验证码倒计时

最新推荐文章于 2024-04-22 11:43:29 发布

Tiger_Paul

最新推荐文章于 2024-04-22 11:43:29 发布

阅读量497

点赞数 1

分类专栏： javascript 文章标签： jquery

本文链接：https://blog.csdn.net/Tiger_Paul/article/details/125772044

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

定义id 使用 Jquery 触发点击事件

Jquery

$(function () {
    /**
     * 验证码发送
     */
    $("#sendCode").click(function () {
        //判断是否有该样式
        if ($(this).hasClass("disabled")) {
            // 正在倒计时
        } else {
            // 发送验证码
            $.get("/sms/sendCode?phone=" + $("#phoneNum").val(), function (data) {
                if (data.code != 0) {
                    alert(data.msg)
                }
            })
            timeoutChangeStyle();
        }
    })
})
// 60秒
var num = 60;
function timeoutChangeStyle() {
    // 先添加样式，防止重复点击
    $("#sendCode").attr("class", "disabled")
    // 到达0秒后 重置时间，去除样式
    if (num == 0) {
        $("#sendCode").text("发送验证码")
        num = 60;
        // 时间到达后清除样式
        $("#sendCode").attr("class", "");
    } else {
        var str = num + "s 后再次发送"
        $("#sendCode").text(str);
        setTimeout("timeoutChangeStyle()", 1000);
    }
    num--;
}

对应效果