Jquery插件实现点击获取验证码后60秒内禁止重新获取

时间：2022-12-09 15:42:06

 

通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取（防刷新）”的功能


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

[js] view plaincopy 
  1. <!DOCTYPE html>  
  2.   
  3. <html>  
  4.   
  5. <head>  
  6.   
  7. <meta charset="utf-8">  
  8.   
  9. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  10.   
  11. <title>Examples</title>  
  12.   
  13. <meta name="description" content="">  
  14.   
  15. <meta name="keywords" content="">  
  16.   
  17. <script src="<a href="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js" target="_blank" <a="">http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js</a> " ></script>  
  18.   
  19. <script src="jquery.cookie.js" ></script>  
  20.   
  21. <style type="text/css">  
  22.   
  23.     * {margin: 0; padding: 0; font-family: "Microsoft Yahei";}  
  24.   
  25.     .captcha-box {width: 360px; height: 34px; margin: 30px; padding: 30px; border: #956E6F 1px dashed; border-radius: 5px; background-color: #FAF2F2;}  
  26.  
  27.     #mobile { float: left; width: 180px; height: 32px; border: #e5e5e5 1px solid; line-height: 32px; text-indent: 8px; outline: none;}  
  28.  
  29.     #getting {float: left; height: 34px; margin-left: -1px; padding: 0 18px; text-align: center;  line-height: 34px; border: #e5e5e5 1px solid; background: linear-gradient(0deg, #f4f2f2 0%,#fbf9f9 100%); cursor: pointer; outline: none;}  
  30.   
  31. </style>  
  32.   
  33. <script>  
  34.   
  35.     $(function(){  
  36.   
  37.         /*仿刷新：检测是否存在cookie*/  
  38.   
  39.         if($.cookie("captcha")){  
  40.   
  41.             var count = $.cookie("captcha");  
  42.   
  43.             var btn = $('#getting');  
  44.   
  45.             btn.val(count+'秒后可重新获取').attr('disabled',true).css('cursor','not-allowed');  
  46.   
  47.             var resend = setInterval(function(){  
  48.   
  49.                 count--;  
  50.   
  51.                 if (count > 0){  
  52.   
  53.                     btn.val(count+'秒后可重新获取').attr('disabled',true).css('cursor','not-allowed');  
  54.   
  55.                     $.cookie("captcha", count, {path: '/', expires: (1/86400)*count});  
  56.   
  57.                 }else {  
  58.   
  59.                     clearInterval(resend);  
  60.   
  61.                     btn.val("获取验证码").removeClass('disabled').removeAttr('disabled style');  
  62.   
  63.                 }  
  64.   
  65.             }, 1000);  
  66.   
  67.         }  
  68.   
  69.         /*点击改变按钮状态，已经简略掉ajax发送短信验证的代码*/  
  70.   
  71.         $('#getting').click(function(){  
  72.   
  73.             var btn = $(this);  
  74.   
  75.             var count = 60;  
  76.   
  77.             var resend = setInterval(function(){  
  78.   
  79.                 count--;  
  80.   
  81.                 if (count > 0){  
  82.   
  83.                     btn.val(count+"秒后可重新获取");  
  84.   
  85.                     $.cookie("captcha", count, {path: '/', expires: (1/86400)*count});  
  86.   
  87.                 }else {  
  88.   
  89.                     clearInterval(resend);  
  90.   
  91.                     btn.val("获取验证码").removeAttr('disabled style');  
  92.   
  93.                 }  
  94.   
  95.             }, 1000);  
  96.   
  97.             btn.attr('disabled',true).css('cursor','not-allowed');  
  98.   
  99.         });  
  100.   
  101.     });  
  102.   
  103. </script>  
  104.   
  105. </head>  
  106.   
  107. <body>  
  108.   
  109.     <div class="captcha-box">  
  110.   
  111.         <input type="text" id="mobile" maxlength="11" placeholder="请输入手机号码">  
  112.   
  113.         <input type="button" id="getting" value="获取验证码">  
  114.   
  115.     </div>  
  116.   
  117. </body>  
  118.   
  119. </html>  

以上就是本文的全部内容了，希望大家能够喜欢。 

参考来源： 
Jquery插件实现点击获取验证码后60秒内禁止重新获取
http://www.lai18.com/content/349866.html
标签：

相关文章