實現刷新頁面時，倒計時仍可正常顯示，不清除記錄。
思路：將當前時間記錄在本地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尼克。我們一起學習計算機相關知識