js倒计时发送短信

最新推荐文章于 2022-05-15 01:47:35 发布

活成自己的想要的样子

最新推荐文章于 2022-05-15 01:47:35 发布

阅读量170

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/emperor_yp/article/details/81188462

版权

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用JavaScript编写一个倒计时功能，用于在用户点击发送短信验证后，限制短时间内重复发送。通过设置定时器更新剩余时间，并禁用发送按钮，确保用户等待指定秒数后才能再次触发短信发送。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    $(".send").click(function () {


        if ($("#UsersPhone").val() == "") {
            layer.msg("请输入手机号码!", { icon: 5 });
            return false;
        }

        var param = /^1[34578]\d{9}$/;
        if (!param.test($("#UsersPhone").val())) {

            layer.msg("请输入正确的手机号码!", { icon: 5 });
            return false;
        }


        if ($(this).html() == "发送验证码") {
            SenMsgTime();
        }
    })

    var time = 60;
    ///倒计时
    var SenMsgTime = function () {
        if (time == 0) {

            $("#senMsg").html("发送验证码");
            $("#senMsg").attr("disabled", "");
            time = 60;
        } else {

            if (time == 60) {

                var Phone = $("#UsersPhone").val();

                //$.ajax({
                //    url: "/Account/SenCode",
                //    data: { Phone: Phone },
                //    type: "POST",
                //    dataType: "json",
                //    success: function (result) {
                //        if (result) {

                //            layer.msg("短信已经发送!", { icon: 1 });
                //        } else {

                //            layer.msg(result.Msg, { icon: 5 });
                //        }

                //    }, complete: function () {


                //    }
                //})
            }

            $("#senMsg").attr("disabled", "disabled");
            time--;

            $("#senMsg").html(time);

            setTimeout(function () { SenMsgTime(); }, 1000);
        }
    }