倒计时,短信发送后倒计时效果js

最新推荐文章于 2025-05-17 16:58:48 发布

转载最新推荐文章于 2025-05-17 16:58:48 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xqschool/p/8622662.html

本文介绍了一种基于JavaScript的验证码倒计时功能实现方法，包括手机号验证、倒计时逻辑及重新发送验证码的流程。通过定时器控制，实现验证码发送后的等待时间，并在等待结束后允许重新发送。

<div class="input-group-addon"><a style="width: 100%;height: 100%" href="javascript:xiaoyueLogin();" id="verbtn" >获取验证码</a></div>



<script>
        var InterValObj; //timer变量，控制时间
        var count = 60; //间隔函数，1秒执行
        var curCount; //当前剩余秒数
        $(function () {
           $("#verbtn").click(function () {})
           $("#lkchage").click(function () {
               var mobile=$("#nickname").val();
               var ver = $("#reg_verify").val();
               if(ver==""){
                   alert("验证码不能为空");
                   return;
               }
               $.post("/ucenter/member/foundpassword",{mobile:mobile,reg_verify:ver},function (data) {
                    console.log(data);
                   alert(data.msg);
                   location.href="/ucenter/member/login.html";
               })
           })


        })
        function xiaoyueLogin() {
            var mobile=$("#nickname").val();
            var reg = /^0?1[3|4|5|8][0-9]\d{8}$/;
            if(!mobile){
                alert('手机号不能为空');
                return false;
            }
            if (!reg.test(mobile)) {
                alert('手机号码格式不正确');
                return false;
            }
            curCount = count;
            $("#verbtn").removeAttr("href");
            $("#verbtn").html("验证码(" + curCount + ")");
            InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
            $.get("/Mob/Message/sendsms?action=1&mobile="+mobile,function (data) {
                 alert(data.msg);
                console.log(data.code);
                  if(data.code == 1){}
            })
        }
        function SetRemainTime() {
            if (curCount == 0) {
                window.clearInterval(InterValObj); //停止计时器
                $("#verbtn").attr("href", "javascript:xiaoyueLogin();");
                $("#verbtn").html("重新发送验证码");
            }
            else {
                curCount--;
                $("#verbtn").html("验证码(" + curCount + ")");
            }
        }

    </script>

转载于:https://www.cnblogs.com/xqschool/p/8622662.html