前端验证码发送后60s倒计时

 $('#getyzm').click(function(){
                $.ajax({
                    url:'/zh/yzm/',
                    type:'POST',
                    data:{'phone':$('#join_id').val()},
                    success:function(reat){
                        if (reat==1){
                            alert('发送成功');
                            $.cookie('yzm', 60, { expires: 1 });   #发送成功后,向用户设置cookie 防止刷新
                            timekeeping();                          #使函数运行
                        }else{
                            alert('验证码发送失败')
                        }
                    }
                })
            })

下面是关于倒计时页面

 1 $(function(){
 2             if($.cookie('yzm')){                #从cookie中取值,查看验证码是否已经发送
 3                 timekeeping();                             #若发送,则运行此函数
 4             }
 5             else{
 6                 $('#getyzm').attr("disabled", false)      #若未发送,设置取消验证码按钮禁用
 7             }
 8             function timekeeping(){                       # 函数运行
 9                 $('#getyzm').attr("disabled", true);       #设置验证码按钮禁用
10                 var hs=setInterval(function (){             #定义一个函数  每秒运行一次 从cookie中读值。
11                     sj=$.cookie("yzm");
12                     sj=sj-1;
13                     $("#getyzm").val(sj+'秒后重发');          #倒计时显示
14                     if(sj==0){                                #若时间到了
15                         $('#getyzm').attr("disabled", false); #设置取消验证码按钮禁用
16                         clearInterval(hs);                     #停止函数,使其不再一秒运行一次
17                         sj=$.cookie("yzm",sj, { expires: -1 });  #删除cookie
18                         $('#getyzm').val("获取验证码");
19                     }else{                                          #若时间未到,将值写入cookie中
20                         $.cookie('yzm', sj, { expires: 1 });
21                     }
22                 },1000);
23             }
      }

需引入jQuery.cookie.js

<input type='button' disabled='disabled' id='getyzm' value='获取验证码'>

猜你喜欢

转载自www.cnblogs.com/jxfy/p/12324446.html