获取验证码倒计时优化 页面刷新实时倒计时
原文链接：https://www.cnblogs.com/shueixue/p/5776965.html
实现刷新页面时，倒计时仍可正常显示，不清除记录。
思路：将当前时间记录在本地sessionStrage中，刷新时，比较当前时间和记录的时间，进行相应操作
jsp页面：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
|
js页面：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
//防止页面刷新倒计时失效
/**
*
* @param {Object} obj 获取验证码按钮
*/
function
monitor(obj) {
var
LocalDelay = getLocalDelay();
if
(LocalDelay.time!=
null
){
var
timeLine = parseInt((
new
Date().getTime() - LocalDelay.time) / 1000);
if
(timeLine > LocalDelay.delay) {
console.log(
"过期"
);
}
else
{
_delay = LocalDelay.delay - timeLine;
obj.text(_delay+
"秒后重新发送"
);
document.getElementById(
"getcode"
).disabled =
true
;
var
timer = setInterval(
function
() {
if
(_delay > 1) {
_delay--;
obj.text(_delay+
"秒后重新发送"
);
setLocalDelay(_delay);
}
else
{
clearInterval(timer);
obj.text(
"获取验证码"
);
document.getElementById(
"getcode"
).disabled =
false
;
}
}, 1000);
}
}
};
//倒计时效果
/**
*
* @param {Object} obj 获取验证码按钮
* @param {Function} callback 获取验证码接口函数
*/
function
countDown(obj, callback) {
if
(obj.text() ==
"获取验证码"
) {
var
_delay = 60;
var
delay = _delay;
obj.text(_delay+
"秒后重新发送"
);
document.getElementById(
"getcode"
).disabled =
true
;
var
timer = setInterval(
function
() {
if
(delay > 1) {
delay--;
obj.html(delay+
"秒后重新发送"
);
setLocalDelay(delay);
}
else
{
clearInterval(timer);
obj.text(
"获取验证码"
);
document.getElementById(
"getcode"
).disabled =
false
;
}
}, 1000);
callback();
}
else
{
return
false
;
}
}
//设置setLocalDelay
function
setLocalDelay(delay) {
//location.href作为页面的唯一标识，可能一个项目中会有很多页面需要获取验证码。
sessionStorage.setItem(
"delay_"
+ location.href, delay);
sessionStorage.setItem(
"time_"
+ location.href,
new
Date().getTime());
}
//getLocalDelay()
function
getLocalDelay() {
var
LocalDelay = {};
LocalDelay.delay = sessionStorage.getItem(
"delay_"
+ location.href);
LocalDelay.time = sessionStorage.getItem(
"time_"
+ location.href);
return
LocalDelay;
}
|
|
1
|
note:
|
1、localstorage存储对象分为两种：
① sessionStrage： session即会话的意思，在这里的session是指用户浏览某个网站时，从进入网站到关闭网站这个时间段，session对象的有效期就只有这么长。
② localStorage： 将数据保存在客户端硬件设备上，不管它是什么，意思就是下次打开计算机时候数据还在。
两者区别就是一个作为临时保存，一个长期保存。
2、(new Date().getTime()
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。