实现刷新页面时，倒计时仍可正常显示，不清除记录。
思路：将当前时间记录在本地sessionStrage中，刷新时，比较当前时间和记录的时间，进行相应操作
jsp页面：
<body>
<button id="getcode" value="获取验证码">获取验证码</button>
</body>
<script type="text/javascript">
$(function() {
var btn = document.getElementById("getcode");
//调用监听
monitor($(btn));
//点击click
btn.onclick = function() {
//倒计时效果 getCode回调函数 获取验证码api
countDown($(this), getCode);
};
function getCode() {
alert("验证码发送成功");
}
});
</script>
js页面：
//防止页面刷新倒计时失效
/**
*
* @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;
}
note:
1、localstorage存储对象分为两种：
① sessionStrage： session即会话的意思，在这里的session是指用户浏览某个网站时，从进入网站到关闭网站这个时间段，session对象的有效期就只有这么长。
② localStorage： 将数据保存在客户端硬件设备上，不管它是什么，意思就是下次打开计算机时候数据还在。
两者区别就是一个作为临时保存，一个长期保存。
2、(new Date().getTime()
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
关注微信公众号：CS尼克。我们一起学习计算机相关知识