HTML部分

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

JS部分

//获取验证码
$(function() {
$("#code_btn").on("tap", function() {
if(!rex.test($("#tel").val())) {
tip("请输入正确手机号");
return false;
}
$.ajax({
async: false,
cache: false,
type: 'POST',
url: forgetConfirmUrl, // 请求的action路径
data: {
phone: $("#tel").val()
},
dataType: "json",
success: function(data) {
console.log(data);
if(data.error_code == 0) {
tip("发送成功");
} else if(data.error_code == 1) {
tip("用户未注册");
} else if(data.error_code == 2) {
tip("手机号值为空");
} else if(data.error_code == 3) {
tip("手机号格式不正确");
} else {
tip("网络异常");
}
}
});
addCookie("secondsremained", 60, 60); //添加cookie记录,有效时间60s
settime($("#code_btn")); //开始倒计时
})
var v = getCookieValue("secondsremained") ? getCookieValue("secondsremained") : 0;//获取cookie值 if(v > 0) {
settime($("#code_btn")); //开始倒计时
}
})
//发送验证码时添加cookie
function addCookie(name, value, expiresHours) {
var cookieString = name + "=" + escape(value);
//判断是否设置过期时间,0代表关闭浏览器时失效
if(expiresHours > 0) {
var date = new Date();
date.setTime(date.getTime() + expiresHours * 1000);
cookieString = cookieString + ";expires=" + date.toUTCString();
}
document.cookie = cookieString;
}
//修改cookie的值
function editCookie(name, value, expiresHours) {
var cookieString = name + "=" + escape(value);
if(expiresHours > 0) {
var date = new Date();
date.setTime(date.getTime() + expiresHours * 1000); //单位是毫秒
cookieString = cookieString + ";expires=" + date.toGMTString();
}
document.cookie = cookieString;
} //根据名字获取cookie的值
function getCookieValue(name) {
var strCookie = document.cookie;
var arrCookie = strCookie.split("; ");
for(var i = 0; i < arrCookie.length; i++) {
var arr = arrCookie[i].split("=");
if(arr[0] == name) {
return unescape(arr[1]);
break;
}
} } //开始倒计时
var countdown;
function settime(obj) {
countdown = getCookieValue("secondsremained");
var tim = setInterval(function() {
countdown--;
obj.attr("disabled", true);
obj.attr("value", "重新发送(" + countdown + ")");
if(countdown <= 0 ) {
clearInterval(tim);
$(obj).removeAttr("disabled");
$(obj).attr("value", "请输入验证码");
}
editCookie("secondsremained", countdown, countdown + 1);
}, 1000) //每1000毫秒执行一次 }

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. win2008 C盘清理

    需要在Windows Server 2008上安装“桌面体验”才能使用磁盘清理工具,安装“桌面体验的”的具体步骤如下:   1. 打开“服务器管理器”——在“功能摘要”下,单击“添加功能”.   2. ...

  2. 搭建 RabbitMQ Server 高可用集群【转】

    阅读目录: 准备工作 搭建 RabbitMQ Server 单机版 RabbitMQ Server 高可用集群相关概念 搭建 RabbitMQ Server 高可用集群 搭建 HAProxy 负载均衡 ...

  3. 安装python的pip模块

    安装python的pip模块 网址https://pypi.python.org/pypi/pip 选择,点击下载 将文件解压到C:\Users\Administrator\AppData\Local ...

  4. SQLServer 2014 本地机房HA+灾备机房DR解决方案

    SQLServer 2014 主数据中心HA+灾备机房DR解决方案 SQLServer 2008 的时候使用 local WSFC+DR Mirror方式,对象是单数据库 两个单独的 WSFC 上使用 ...

  5. error: js/dist/app.js from UglifyJs Unexpected token: name (Dom7)

    What you did I have installed Swiper as normal dependency in my Project and import it to my scripts ...

  6. 动态获取后台传过来的值作为select选项

    问题描述:点击左侧菜单项,进入对应的具体页面a.html,页面上方有个select框,点击框后,会浮现选择项. 解决思路:对左侧菜单项添加一个onclick事件,进入后台做具体的查询,将查询到的lis ...

  7. 关于使用easyui为前端框架,加载表格数据较多时在火狐浏览器会出现表格片段不停闪烁问题的兼容问题解决。

    1.项目是可视化管理系统,加载的数据较多,使用谷歌浏览器从登陆界面跳转到主页时还算干净利落,但是使用火狐浏览器时在这一过程中在数据没有加载完毕之前,整个页面就仿佛是在闪烁,可以看到闪烁的是表格字段的片 ...

  8. Linux系统下目录的权限意义

    访问者及其基本权限 Linux系统内的文件访问者有三种身份,分别是: a) 文件和文件目录的所有者: u---User(所有权);b) 文件和文件目录的所有者所在的组的用户: g---Group;c) ...

  9. linux 搭建testlink的问题总结

    testlink问题总结 1.要求环境centos7,安装php版本5.5以上(7.1.5),mysql5.6 ,5.7测试还不行(改变挺大的5.7表结构,字段啥的待研究),apache任意版本即可 ...

  10. 金蝶k3完全卸载,注册表手动清理

    HKEY_LOCAL_MACHINE\SOFTWARE\KINGDEE 如果操作系统是64位的,在注册表目录:HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node下面还有一个 ...