js之短信60s倒计时

1、页面发送短信验证码的表单

<div class="form-group">
    <div class="col-xs-6 col-sm-7 col-md-7 col-lg-7" >
       <input type="text"  id="userPhone" class="form-control" placeholder="请输入手机号码">
    </div>
    <div class="col-xs-6 col-sm-5 col-md-5 col-lg-5" style="justify-content:flex-end;display: flex;">
       <button type="button" class="btn btn-info"  id="second">点击获取验证码</button>
    </div>
</div>
<div class="form-group">
    <input type="text" name="securityCode" class="form-control"  placeholder="请输入验证码">
</div>

2、发送短信验证码的JS处理逻辑

<script type="text/javascript">
        $("#second").click(function (){
            sendyzm($("#second"));
        });
        //用ajax提交到后台的发送短信接口
        function sendyzm(obj){
            var phone = $("#userPhone").val();
            var result = isPhoneNum();
            if(result) {
                $.ajax({
                    url:"http://localhost:8085/my/sendYzm",
                    data:{phone:phone},
                    dataType:"json",
                    type:"post",
                    async : false,
                    cache : false,
                    success:function(res){
                        debugger;
                        if(res){
                            alert("验证码发送成功");
                        }else{
 
                        }
                    },
                    error:function(){
                        alert("验证码发送失败");
                    }
                })
                setTime(obj);//开始倒计时
            }
        }
 
        //60s倒计时实现逻辑
        var countdown = 60;
        function setTime(obj) {
            if (countdown == 0) {
                obj.prop('disabled', false);
                obj.text("点击获取验证码");
                countdown = 60;//60秒过后button上的文字初始化,计时器初始化;
                return;
            } else {
                obj.prop('disabled', true);
                obj.text("("+countdown+"s)后重新发送") ;
                countdown--;
            }
            setTimeout(function() { setTime(obj) },1000) //每1000毫秒执行一次
        }
 
 
        //校验手机号是否合法
        function isPhoneNum(){
            var phonenum = $("#userPhone").val();
            var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if(!reg.test(phonenum)){
                alert('请输入有效的手机号码！');
                return false;
            }else{
                return true;
            }
        }
    </script>

 

微信公号搜索：遇见一朵小花。（或扫描二维码）找我玩啊只讲对你有用的东西。

也常常给粉丝寄出自己看完闲置的好书，喜欢看书的可以来看看，

还不定期在公众号请大家喝奶茶！

想与我聊聊或者有什么问题都可以在公众号找到我。

等你哟~