Jquery插件 防刷新倒计时 “点击获取验证码后60秒内禁止重新获取

Posted 2020-08-30

Jquery插件实现“点击获取验证码后60秒内禁止重新获取（防刷新）”

 

 

 

效果图：

先到官网（http://plugins.jQuery.com/cookie/）下载cookie插件，放到相应文件夹，代码如下：

 1 <style type="text/css">  
 2     * {margin: 0;
 3          padding: 0; 
 4          font-family: "Microsoft Yahei";
 5     }  
 6     .captcha-box {
 7          width: 360px; 
 8          height: 34px; 
 9          margin: 30px; 
10          padding: 30px; 
11          border: #956E6F 1px dashed; 
12          border-radius: 5px; 
13          background-color: #FAF2F2;
14      }  
15     #mobile { 
16          float: left; 
17          width: 180px; 
18          height: 32px; 
19          border: #e5e5e5 1px solid; 
20          line-height: 32px; 
21          text-indent: 8px; 
22          outline: none;
23       }  
24     #getting {
25          float: left; 
26          height: 34px; 
27          margin-left: -1px; 
28          padding: 0 18px; 
29          text-align: center;  
30          line-height: 34px; 
31          border: #e5e5e5 1px solid; 
32          background: linear-gradient(0deg, #f4f2f2 0%,#fbf9f9          100%); cursor: pointer; outline: none;}  
33 </style>  

1 <div class="captcha-box">  
2     <input type="text" id="mobile" maxlength="11" placeholder="请输入手机号码">  
3     <input type="button" id="getting" value="获取验证码">  
4 </div> 

 1 <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js" ></script>  
 2 <script src="jquery.cookie.js" ></script>  
 3 <script>  
 4     $(function(){  
 5    
 6         /*仿刷新：检测是否存在cookie*/  
 7         if($.cookie("captcha")){  
 8             var count = $.cookie("captcha");  
 9             var btn = $(‘#getting‘);  
10             btn.val(count+‘秒后可重新获取‘).attr(‘disabled‘,true).css(‘cursor‘,‘not-allowed‘);  
11             var resend = setInterval(function(){  
12                 count--;  
13                 if (count > 0){  
14                     btn.val(count+‘秒后可重新获取‘).attr(‘disabled‘,true).css(‘cursor‘,‘not-allowed‘);  
15                     $.cookie("captcha", count, {path: ‘/‘, expires: (1/86400)*count});  
16                 }else {  
17                     clearInterval(resend);  
18                     btn.val("获取验证码").removeClass(‘disabled‘).removeAttr(‘disabled style‘);  
19                 }  
20             }, 1000);  
21         }  
22    
23         /*点击改变按钮状态，已经简略掉ajax发送短信验证的代码*/  
24         $(‘#getting‘).click(function(){  
25             var btn = $(this);  
26             var count = 60;  
27             var resend = setInterval(function(){  
28                 count--;  
29                 if (count > 0){  
30                     btn.val(count+"秒后可重新获取");  
31                     $.cookie("captcha", count, {path: ‘/‘, expires: (1/86400)*count});  
32                 }else {  
33                     clearInterval(resend);  
34                     btn.val("获取验证码").removeAttr(‘disabled style‘);  
35                 }  
36             }, 1000);  
37             btn.attr(‘disabled‘,true).css(‘cursor‘,‘not-allowed‘);  
38         });  
39    
40     });  
41 </script>