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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>Examples</title>
  7. <meta name="description" content="">
  8. <meta name="keywords" content="">
  9. <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>
  10. <script src="jquery.cookie.js" ></script>
  11. <style type="text/css">
  12. * {margin: 0; padding: 0; font-family: "Microsoft Yahei";}
  13. .captcha-box {width: 360px; height: 34px; margin: 30px; padding: 30px; border: #956E6F 1px dashed; border-radius: 5px; background-color: #FAF2F2;}
  14. #mobile { float: left; width: 180px; height: 32px; border: #e5e5e5 1px solid; line-height: 32px; text-indent: 8px; outline: none;}
  15. #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;}
  16. </style>
  17. <script>
  18. $(function(){
  19. /*仿刷新：检测是否存在cookie*/
  20. if($.cookie("captcha")){
  21. var count = $.cookie("captcha");
  22. var btn = $('#getting');
  23. btn.val(count+'秒后可重新获取').attr('disabled',true).css('cursor','not-allowed');
  24. var resend = setInterval(function(){
  25. count--;
  26. if (count > 0){
  27. btn.val(count+'秒后可重新获取').attr('disabled',true).css('cursor','not-allowed');
  28. $.cookie("captcha", count, {path: '/', expires: (1/86400)*count});
  29. }else {
  30. clearInterval(resend);
  31. btn.val("获取验证码").removeClass('disabled').removeAttr('disabled style');
  32. }
  33. }, 1000);
  34. }
  35. /*点击改变按钮状态，已经简略掉ajax发送短信验证的代码*/
  36. $('#getting').click(function(){
  37. var btn = $(this);
  38. var count = 60;
  39. var resend = setInterval(function(){
  40. count--;
  41. if (count > 0){
  42. btn.val(count+"秒后可重新获取");
  43. $.cookie("captcha", count, {path: '/', expires: (1/86400)*count});
  44. }else {
  45. clearInterval(resend);
  46. btn.val("获取验证码").removeAttr('disabled style');
  47. }
  48. }, 1000);
  49. btn.attr('disabled',true).css('cursor','not-allowed');
  50. });
  51. });
  52. </script>
  53. </head>
  54. <body>
  55. <div class="captcha-box">
  56. <input type="text" id="mobile" maxlength="11" placeholder="请输入手机号码">
  57. <input type="button" id="getting" value="获取验证码">
  58. </div>
  59. </body>
  60. </html>

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

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

Jquery插件实现点击获取验证码后60秒内禁止重新获取的更多相关文章

  1. jQuery实现发送短信验证码后60秒倒计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  2. 获取验证码，60秒倒计时js

    <input type="button" id="btn" value="免费获取验证码" /><script type= ...

  3. js 点击获取验证码后的倒数60s

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script ...

  4. js 验证码 倒计时60秒

    js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...

  5. javaScript 验证码 倒计时60秒

    <input type="button" id="btn" value="免费获取验证码" /> <script type ...

  6. vue实现验证码倒计时60秒的具体代码

    vue实现验证码倒计时60秒的具体代码 <span v-show="show" @click="getCode">获取验证码</span> ...

  7. JS获取验证码后倒计时不受刷新及关闭影响

    HTML部分 <input type="button" id="code_btn" value="获取验证码"> JS部分 // ...

  8. jQuery实现发送验证码倒计时60秒

    前端HMTL: <div class="form_box"> <div class="line mb40"> <div class ...

  9. iOS-登录发送验证码时60秒倒计时,直接用

    __block NSInteger timeout= ; //倒计时时间 KWeakSelf dispatch_queue_t queue = dispatch_get_global_queue(DI ...

随机推荐

  1. Android基础（13）——对话框 的使用

    转自:Android之 对话框 的使用 一个对话框通常是在当前Activity之前显示的一个小的窗口.下面的Activity失去了焦点,上面的对话框接收用户的交互信息.对话框通常用来作为提示以及直接与 ...

  2. jquery遍历的radio的取值问题

    html页面:<c:if test="${courseStandardVos != null }"> <c:set var="index" v ...

  3. 常用的SQL分页

    有关分页 SQL 的资料很多,有的使用存储过程,有的使用游标.本人不喜欢使用游标,我觉得它耗资.效率低:使用存储过程是个不错的选择,因为存储过程是经过预编译的,执行效率高,也更灵活.先看看单条 SQL ...

  4. Spark Streaming源码解读之流数据不断接收全生命周期彻底研究和思考

    本期内容 : 数据接收架构设计模式 数据接收源码彻底研究 一.Spark Streaming数据接收设计模式   Spark Streaming接收数据也相似MVC架构: 1. Mode相当于Rece ...

  5. 使用DotNetOpenAuth搭建OAuth2.0授权框架——Demo代码简单说明

    前段时间随意抽离了一部分代码作为OAuth2的示例代码,若干处会造成困扰,现说明如下: public class OAuthController : Controller { private stat ...

  6. display:inline-block左右元素上下不对齐

    今天做了两个inline-block元素,出现左右两个元素顶端出现上下不对齐的情况(下图): 解决办法: 把应用 inline-block的元素加上 vertical-align: top; .CSS ...

  7. Entity Framwork(EF) 7——在Controller内获取指定字段的值

    一.开发背景: 在用户登录的时候,验证用户和密码是否正确.验证通过后将用户名和用户ID保存下来以便后续数据更新时使用. 二.用户验证方法: 1.创建DBContext 对象. ApplicationD ...

  8. python与正则表达式：re模块详解

    re模块是python中处理正在表达式的一个模块 正则表达式知识储备:http://www.cnblogs.com/huamingao/p/6031411.html 1. match(pattern, ...

  9. python函数，lambda表达式，三目运算，列表解析，递归

    一.自定义函数 定义函数时,函数体不执行:只有在调用函数时,函数体才执行.函数的结构: 1. def 2. 函数名 3. 函数体 def func_name(): 函数体 4. 返回值 如果没有声明返 ...

  10. noip2006 2^k进制数

    设r是个2k进制数,并满足以下条件: (1)r至少是个2位的2k进制数. (2)作为2k进制数,除最后一位外,r的每一位严格小于它右边相邻的那一位. (3)将r转换为2进制数q后,则q的总位数不超过w ...