JS获取验证码后倒计时不受刷新及关闭影响
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获取验证码后倒计时不受刷新及关闭影响的更多相关文章
- Jquery插件实现点击获取验证码后60秒内禁止重新获取
通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取(防刷新)”的功能 先到官网(http://plugins.jquery.com/cookie/ )下载coo ...
- js发送验证码(倒计时)
需求:在用户点击获取验证码后60s内不能再次获取 代码 //倒计时60秒 var countdown=60; //显示获取验证码倒计时的文本标签 var _generate_code =$(" ...
- JS 获取验证码 倒计时
setInterval 一个定时器搞定 <style> button{ background: #45BCF9; color: #fff; padding: 4px 10px; borde ...
- js 点击获取验证码后的倒数60s
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script ...
- ASP.NET中图片验证码与js获取验证码的值
现在的程序中,为了防止用户恶意点击,我们一般都会加上验证,现在比较普遍的是加上图片验证码或者手机短信验证.验证码一般都是防机器不防人,有效的防止了恶意点击. 那么在webform中如何生成动态的图片验 ...
- jQuery实现发送验证码30s倒计时,且刷新页面时有效
在这里讲一讲这个案例的实现思路吧(个人见解)..核心思想:为防止页面刷新时倒计时失效的解决方案是:当每次刷新一次页面时都执行一个函数 即下面讲到的 setStyle() 函数.这个函数会根据当前的 c ...
- 微信小程序【获取验证码】倒计时效果
最近开始接触微信小程序,会记录一些相关的小功能——例如这次是点击[获取验证码]按钮出现的倒计时效果. 原文: http://blog.csdn.net/Wu_shuxuan/article/detai ...
- js获取验证码 秒表效果(原创)
<script src="http://code.jquery.com/jquery-latest.js"></script> <input type ...
- react项目中登陆注册验证码的倒计时,页面刷新不会重置
目前很多的网站和app在做登陆注册时都会用到手机验证码,为了防止验证码轰炸,也就是随意的点击验证码,一般我们需要对获取验证码进行一些限制,最常用到的是在规定时间内不得重复发送. 实现倒计时很简单,可以 ...
随机推荐
- LVM初级配置
步骤: 1.将物理硬盘转换成物理卷(PV) 创建PV:pvcreate /dev/vdb 2.将PV添加到卷组中(VG) vgcreate vg0 /dev/vdb 3.创建逻辑卷(LV)并从VG中调 ...
- 用Python优雅的处理日志
我们可以通过以下3种方式可以很优雅配置logging日志: 1)使用Python代码显式的创建loggers, handlers和formatters并分别调用它们的配置函数: 2)创建一个日志配置文 ...
- 修复ogg source端意外宕机造成的数据不同步
修复ogg source端意外宕机造成的数据不同步 分类: Oracle2016-04-28 11:50:40原文地址:修复ogg source端意外宕机造成的数据不同步 作者:十字螺丝钉 ogg s ...
- idea Unable to open debugger port (127.0.0.1:58006) Address already in use: JVM_Bind 的解决办法
报错说端口58006 被占用了,于是去修改端口 重新dubug 发现换个端口号还是不行,同样的错误.有时候你把idea关闭重新打开依旧不起作用.最暴力的办法就是重启电脑... 问题解决: 查看使用中的 ...
- 信息摘要算法之四:SHA512算法分析与实现
前面一篇中我们分析了SHA256的原理,并且实现了该算法,在这一篇中我们将进一步分析SHA512并实现之. 1.SHA简述 尽管在前面的篇章中我们介绍过SHA算法,但出于阐述的完整性我依然要简单的说明 ...
- Connection reset by [server_ip] port 22 (hexo d 部署博客出错)
问题 在使用 hexo d 部署博客和使用 Git/Github 进行 git push -u origin master 时遇到了以下问题: git -c diff.mnemonicprefix=f ...
- Confluence 6 PostgreSQL 问题解决
如果 Confluence 提示没有 class 文件,你可能将你的 JDBC 驱动放置到了错误的文件夹. 如果你不能从你从 Confluence 中连接到 PostgreSQL ,并且这 2 个服务 ...
- ionic3 Injectable 引入NavController
在service里 引入 navcontroller 报错 And I get error No provider for NavController. 一个比较容易解决的方法, import {Io ...
- Chrome浏览器常用键盘快捷键介绍
很多人喜欢使用键盘快捷键来操作电脑,因为在熟练的情况下,使用键盘会比使用鼠标点击更快.更高效.本文对Chrome浏览器常用的快捷键做个说明. 标签页和窗口快捷键 1. Ctrl + n 打开新窗口 ...
- shell设置连接服务器永不超时
1.打开/etc/ssh/sshd_config vim /etc/ssh/sshd_config 2.设置如下内容: MaxAuthTries 60 MaxSessions 3 ClientAl ...