短信验证码js效果实现(防刷新)

Posted 2020-10-12

<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>  
<script>
        $(function(){
            /*防刷新：检测是否存在cookie*/
            if($.cookie("captcha")){
                var count = $.cookie("captcha");
                var btn = $(‘#getting‘);
                btn.val(count+‘秒后可重新获取‘).attr(‘disabled‘,true).css(‘cursor‘,‘not-allowed‘);
                var resend = setInterval(function(){
                    count--;
                    if (count > 0){
                        btn.val(count+‘秒后可重新获取‘).attr(‘disabled‘,true).css(‘cursor‘,‘not-allowed‘);
                        $.cookie("captcha", count, {path: ‘/‘, expires: (1/86400)*count});
                    }else {
                        clearInterval(resend);
                        btn.val("获取验证码").removeClass(‘disabled‘).removeAttr(‘disabled style‘);
                    }
                }, 1000);
            }

              /*点击改变按钮状态，已经简略掉ajax发送短信验证的代码*/
        $(‘.get_code‘).click(function(){
            var btn = $(this);
            var count = 60;
            var tel=$(".tel_inp").val();
            var $templateId="59108";
            if(tel==""){
                layer.tips("手机号不能为空", ".tel_inp", {tips:3,time:2000});
            }
            else if(!(/^1(3|4|5|7|8)\d{9}$/).test(tel)){
                layer.tips("手机号输入不正确", ".tel_inp", {tips:3,time:2000});
            }
            else{
                var resend = setInterval(function(){
                    count--;
                    if (count > 0){
                        btn.text(‘重新发送(‘+count+‘)‘);
                        $.cookie("captcha", count, {path: ‘/‘, expires: (1/86400)*count});
                    }else {
                        clearInterval(resend);
                        btn.text("获取动态密码").removeAttr(‘disabled style‘);
                    }
                }, 1000);
                $.ajax({
                    url  : "/duanxin/demo.php",
                    type : ‘post‘,
                    data : {‘tel‘:tel,‘templateId‘:$templateId},
                    dataType:‘text‘,
                    //beforeSend:function(){},
                    success:function(data){
                        layer.tips(data, ".tel_inp", {tips:3,time:2000});
                    }
                });
                btn.attr(‘disabled‘,true).css(‘cursor‘,‘not-allowed‘);
            }

        });
</script>