示例:发送手机验证码
防止页面刷新后,发送验证码按钮重置
注:橙色部分为后增加代码,为防止验证码等待期间用户退出或者切换到其他页面以至于很久之后回到当前页面倒计时还在的问题,加入时间对比,记录用户发送验证码时+60秒后的时间,下次进入判断当前时间是否大于记录时间,如果大于或者不存在,则距离上次发送验证码已超过60秒,这时不再读取倒计时。
1.将发送验证码放入cookie $.cookie("time", time); 2.当页面载入时判断cookie是否为空
var date = $.cookie("date");//取上次发送验证码时记录的时间 (发送时间+60s)
if(date && (new Date().getTime() < new Date(date).getTime()) ){//判断当前时间是否小于记录时间
if ($.cookie("time") != undefined && $.cookie("time") != 'NaN'
&& $.cookie("time") != 'null') {// cookie存在倒计时
timekeeping();//修改发送验证码按钮方法
} else {// cookie 没有倒计时
$('#ihd_getcode_btn').prop("disabled", false);
_button.removeClass("disabled");
}
}
3.时间未到时进入修改发送验证码按钮方法
function timekeeping() {
// 把按钮设置为不可以点击
_button.prop("disabled", true);
_button.addClass("disabled");
// 从cookie 中读取剩余倒计时
var time = $.cookie("time");
var interval = setInterval(function() {// 每秒读取一次cookie
// 把剩余总倒计时减掉1
time--;
if (time > 0) {// 剩余倒计时不为零
// 在发送按钮显示剩余倒计时
_button.html(time + "秒后重发");
// 重新写入总倒计时
$.cookie("time", time,{ path: '/',expires : (1/86400)*time});
} else {// 剩余倒计时为零,则显示 重新发送,可点击
// 清除定时器
clearInterval(interval);
// 删除cookie
time = $.cookie("time", time, {expires : -1});
_button.prop("disabled", false);
_button.removeClass("disabled");
_button.html("获取验证码");
}
}, 1000);
};
注:发送验证码方法:
$(".ihd_getcode_btn").click(function() {
var phone = $('input[name="phone"]').val();
if (!mobileRegex.test(phone)) {
apus.ui.toastr.error("手机号格式错误");
return;
}
// 发送验证码
_button.prop("disabled", true);
_button.addClass("disabled");
apus.ui.maskLlock(true);
$.ajax({
type : "post",
url : getUrl('/vip/sendCode'),
dataType : "json",
data : {
phone : phone
},
success : function(result) {
apus.ui.maskLlock(false);
if (result.success) {
apus.ui.toastr.info("验证码发送成功");
$.cookie("time", 60,{ path: '/',expires : (1/86400)*60});
var curDate = new Date();
curDate.setSeconds(curDate.getSeconds()+60);
$.cookie("date",curDate,{ path: '/',expires : (1/86400)*60});
timekeeping();
} else {
apus.ui.toastr.error("验证码发送失败," + result.msg);
_button.prop("disabled", false);
_button.removeClass("disabled");
_button.html("获取验证码");
}
},
error : function(e) {
apus.ui.maskLlock(false);
_button.prop("disabled", false);
_button.removeClass("disabled");
_button.html("获取验证码");
apus.ui.toastr.error("网络异常,请稍候重试");
}
});
});

jquery--cookie应用的更多相关文章

  1. jquery.cookie的使用

    今天想到了要为自己的影像日记增加赞的功能,并且需要用到cookie. 记得原生的js操作cookie也不是很麻烦的,但似乎jquery更简单,不过相比原生js,需要额外引入2个文件,似乎又不是很好,但 ...

  2. jQuery cookie使用

    什么是jquery cookie? A simple, lightweight jQuery plugin for reading, writing and deleting cookies. Usa ...

  3. jQuery插件 -- Cookie插件jquery.cookie.js(转)

    Cookie是网站设计者放置在客户端的小文本文件.Cookie能为用户提供很多的使得,例如购物网站存储用户曾经浏览过的产品列表,或者门户网站记住用户喜欢选择浏览哪类新闻. 在用户允许的情况下,还可以存 ...

  4. jquery cookie的用法

    http://www.cnblogs.com/qiantuwuliang/archive/2009/07/19/1526663.html jQuery cookie是个很好的cookie插件,大概的使 ...

  5. jquery.cookie.js && java后台代码 操作cookie实现记住当前用户输入信息代码

    下载jquery.cookie.js地址看这里:http://pan.baidu.com/s/1gdCPaN5 //初始化页面时验证是否记住了密码 $(document).ready(function ...

  6. 【转】jquery.cookie.js的使用

    Cookie是由服务器端生成,发送给User-Agent(一般是浏览器),浏览器会将Cookie的key/value保存到某个目录下的文本文件内,下次请求同一网站时就发送该Cookie给服务器(前提是 ...

  7. jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下.   复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...

  8. jquery.cookie() 的使用(原)

    jquery.cookie()是一个轻量级的cookie 插件,可以读取.写入.删除 cookie. 步奏: 1. 添加jQuery插件和jQuery.cookie插件 <script src= ...

  9. Jquery.cookie.js 源码和使用方法

    jquery.cookie.js源码和使用方法 jQuery操作cookie的插件,大概的使用方法如下 $.cookie(‘the_cookie’); //读取Cookie值$.cookie(’the ...

  10. jQuery.cookie.js插件了解及使用方法

    jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jque ...

随机推荐

  1. Divide the Sequence

    Time Limit: 5000/2500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submission( ...

  2. git stash和git stash pop(转载)

    转自:http://www.cnblogs.com/highriver/archive/2012/01/05/2313808.html zz: http://blog.csdn.net/herbert ...

  3. Angular 项目开发中父子组件传参

    在项目开发中经常会遇到 组件之间传参的问题.今天总结下在使用angular的项目中父子组件传参的问题: 1.父组件向子组件传参: 然后在父组件中 然后在父组件的html中 然后就可以在子组件中使用了 ...

  4. nginx部署h5项目

    1. nginx部署h5项目 此为windows部署,liunx也类似的 1.1. 前言 部署h5项目还是很简单的,不过对小白来讲一开始可能也是一脸懵逼,这个简单教程针对的是从未部署过前后端分离前端项 ...

  5. 黑客攻防技术宝典web实战篇:攻击应用程序逻辑习题

    猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 随书答案. 1. 何为强制浏览?可以通过它确定哪些漏洞? 强制浏览包括避开浏览器导航对应用程序功能访问顺序实 ...

  6. mybatis使用要点(2019.5.19)

    接口入参 只有一个参数,叫啥都没问题 有两个参数以上,需使用@Param,否则名字依次为0.1.2和param1.param2.param3 一般用#,防sql注入:偶尔用$,比如需要动态表名等 接口 ...

  7. deque双向队列

    对于双向队列,与队列queue以及vector容器的区别就在于,名字不同,也就是它是双向的,可以从头开始操作,也可以从末尾开始操作. 双向队列的常用方法跟队列queue差不多: 头文件: #inclu ...

  8. 跟我一起玩Win32开发(19):浏览和打开文件

    在应用程序中,我们很经常要实现的功能,是Open文件或保存文件对话框,让用户来选择一个或N个文件.本文我将介绍两种思路,第一种方法较为复杂,第二种方法较为简单. 方法一:老规矩 这是一种传统方法,使用 ...

  9. LBP特征

    此篇摘取 <LBP特征原理及代码实现> <LBP特征 学习笔记> 另可参考实现: <LBP特征学习及实现> <LBP特征的实现及LBP+SVM分类> & ...

  10. 题解报告:NYOJ #737 石子合并(一)(区间dp)

    描述 有N堆石子排成一排,每堆石子有一定的数量.现要将N堆石子并成为一堆.合并的过程只能每次将相邻的两堆石子堆成一堆,每次合并花费的代价为这两堆石子的和,经过N-1次合并后成为一堆.求出总的代价最小值 ...