HTML部分

  1. <input type="button" id="code_btn" value="获取验证码">

JS部分

  1. //获取验证码
  2. $(function() {
  3. $("#code_btn").on("tap", function() {
  4. if(!rex.test($("#tel").val())) {
  5. tip("请输入正确手机号");
  6. return false;
  7. }
  8. $.ajax({
  9. async: false,
  10. cache: false,
  11. type: 'POST',
  12. url: forgetConfirmUrl, // 请求的action路径
  13. data: {
  14. phone: $("#tel").val()
  15. },
  16. dataType: "json",
  17. success: function(data) {
  18. console.log(data);
  19. if(data.error_code == 0) {
  20. tip("发送成功");
  21. } else if(data.error_code == 1) {
  22. tip("用户未注册");
  23. } else if(data.error_code == 2) {
  24. tip("手机号值为空");
  25. } else if(data.error_code == 3) {
  26. tip("手机号格式不正确");
  27. } else {
  28. tip("网络异常");
  29. }
  30. }
  31. });
  32. addCookie("secondsremained", 60, 60); //添加cookie记录,有效时间60s
  33. settime($("#code_btn")); //开始倒计时
  34. })
  35. var v = getCookieValue("secondsremained") ? getCookieValue("secondsremained") : 0;//获取cookie值
  36. if(v > 0) {
  37. settime($("#code_btn")); //开始倒计时
  38. }
  39. })
  40. //发送验证码时添加cookie
  41. function addCookie(name, value, expiresHours) {
  42. var cookieString = name + "=" + escape(value);
  43. //判断是否设置过期时间,0代表关闭浏览器时失效
  44. if(expiresHours > 0) {
  45. var date = new Date();
  46. date.setTime(date.getTime() + expiresHours * 1000);
  47. cookieString = cookieString + ";expires=" + date.toUTCString();
  48. }
  49. document.cookie = cookieString;
  50. }
  51. //修改cookie的值
  52. function editCookie(name, value, expiresHours) {
  53. var cookieString = name + "=" + escape(value);
  54. if(expiresHours > 0) {
  55. var date = new Date();
  56. date.setTime(date.getTime() + expiresHours * 1000); //单位是毫秒
  57. cookieString = cookieString + ";expires=" + date.toGMTString();
  58. }
  59. document.cookie = cookieString;
  60. }
  61. //根据名字获取cookie的值
  62. function getCookieValue(name) {
  63. var strCookie = document.cookie;
  64. var arrCookie = strCookie.split("; ");
  65. for(var i = 0; i < arrCookie.length; i++) {
  66. var arr = arrCookie[i].split("=");
  67. if(arr[0] == name) {
  68. return unescape(arr[1]);
  69. break;
  70. }
  71. }
  72. }
  73. //开始倒计时
  74. var countdown;
  75. function settime(obj) {
  76. countdown = getCookieValue("secondsremained");
  77. var tim = setInterval(function() {
  78. countdown--;
  79. obj.attr("disabled", true);
  80. obj.attr("value", "重新发送(" + countdown + ")");
  81. if(countdown <= 0 ) {
  82. clearInterval(tim);
  83. $(obj).removeAttr("disabled");
  84. $(obj).attr("value", "请输入验证码");
  85. }
  86. editCookie("secondsremained", countdown, countdown + 1);
  87. }, 1000) //每1000毫秒执行一次
  88. }

JS获取验证码后倒计时不受刷新及关闭影响的更多相关文章

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

    通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取(防刷新)”的功能 先到官网(http://plugins.jquery.com/cookie/ )下载coo ...

  2. js发送验证码(倒计时)

    需求:在用户点击获取验证码后60s内不能再次获取 代码 //倒计时60秒 var countdown=60; //显示获取验证码倒计时的文本标签 var _generate_code =$(" ...

  3. JS 获取验证码 倒计时

    setInterval 一个定时器搞定 <style> button{ background: #45BCF9; color: #fff; padding: 4px 10px; borde ...

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

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

  5. ASP.NET中图片验证码与js获取验证码的值

    现在的程序中,为了防止用户恶意点击,我们一般都会加上验证,现在比较普遍的是加上图片验证码或者手机短信验证.验证码一般都是防机器不防人,有效的防止了恶意点击. 那么在webform中如何生成动态的图片验 ...

  6. jQuery实现发送验证码30s倒计时,且刷新页面时有效

    在这里讲一讲这个案例的实现思路吧(个人见解)..核心思想:为防止页面刷新时倒计时失效的解决方案是:当每次刷新一次页面时都执行一个函数 即下面讲到的 setStyle() 函数.这个函数会根据当前的 c ...

  7. 微信小程序【获取验证码】倒计时效果

    最近开始接触微信小程序,会记录一些相关的小功能——例如这次是点击[获取验证码]按钮出现的倒计时效果. 原文: http://blog.csdn.net/Wu_shuxuan/article/detai ...

  8. js获取验证码 秒表效果(原创)

    <script src="http://code.jquery.com/jquery-latest.js"></script> <input type ...

  9. react项目中登陆注册验证码的倒计时,页面刷新不会重置

    目前很多的网站和app在做登陆注册时都会用到手机验证码,为了防止验证码轰炸,也就是随意的点击验证码,一般我们需要对获取验证码进行一些限制,最常用到的是在规定时间内不得重复发送. 实现倒计时很简单,可以 ...

随机推荐

  1. adb ( Android Debug Bridge)

    adb ( Android Debug Bridge) 是一个通用命令行工具,其允许您与模拟器实例或连接的 Android 设备进行通信.它可为各种设备操作提供便利,如安装和调试应用. adb工具的工 ...

  2. linux学习之uniq

    uniq最经常用的是统计次数,通常先排序,然后uniq  -c cat a.txt |sort -nr |uniq -c

  3. 1,环境的搭建,angular

    也是学习一些皮毛,只是把这些经验记录下来而已. 至于angular有什么好处,或者有什么是什么,我就不多做介绍,自己可以去百度,肯定能找到更为详细的. 我使用的是google提供的angualr-cl ...

  4. Redis的消息发布和订阅

    Redis的消息发布和订阅 Author:SimpleWu GitHub-redis 什么是消息发布和订阅? Redis 发布订阅(pub/sub)是一种进程间的消息通信模式: 发送者(pub)发送消 ...

  5. 团队开发工具git常用命令

    Git 常用命令 Git配置 git config --global user.name "storm" git config --global user.email " ...

  6. LeetCode(78):子集

    Medium! 题目描述: 给定一组不含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重复的子集. 示例: 输入: nums = [1,2,3] 输出: [ [3 ...

  7. LeetCode(68):文本左右对齐

    Hard! 题目描述: 给定一个单词数组和一个长度 maxWidth,重新排版单词,使其成为每行恰好有 maxWidth 个字符,且左右两端对齐的文本. 你应该使用“贪心算法”来放置给定的单词:也就是 ...

  8. 【linux】Linux误删C基本运行库libc.so.6急救方法

    转自:http://www.cnblogs.com/fjping0606/p/4551475.html 下面全文都是拷贝的上面链接的内容. 首先普及一下关于libc.so.6的基本常识: libc.s ...

  9. IntersectionObserver API 使用教程

    转载:原文地址:http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html 网页开发时,常常需要了解某个元素是否进入了&q ...

  10. 005-2-Python文件操作

    Python文件操作(file) 文件操作的步骤: 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件(操作文件后记住关闭) 1.读写文件的基础语法: open() 将会返回一个 ...