最近在做一個項目，用到了點擊按鈕實現倒計時，這個用js來實現很簡單。但是遇到了一個問題
頁面刷新后js重新加載導致 倒計時重新開始，或者直接初始化了
后來通過 cookie 保存來實現了js倒計時，關閉頁面和強制刷新都不會停止
主要思路
通過獲取當前時間 與 倒計時停止時間 之間的時間間隔來確定倒計時的數值。
具體如下：
1.首次加載頁面 點擊開始
1) 獲取當前時間 與要倒計時的時間相加獲得要 停止計時的時間
2) 用cookie保存這個停止計時的時候
3) 通過js的setInterval 進行定時刷新時間
4) 當倒計時結束后 清楚cookie中保存的結束時間
2.當第二次進入頁面或刷新頁面時
1)首先判斷cookie中時候有結束時間
2)有取出 和 當前時間求差 如果 差值大於倒計時間隔時間 說明倒計時已結束需要重新點擊 否則就將這個差值作為倒計時開始的數字
3）沒有需要重新點擊開始倒計時
閑話少說，上代碼~~~~
<html>
<head>
<title>JS倒計時（無視刷新）</title>
<style>
.disabled {
background: #fff;
color: #ccc;
border: solid 0px;
}
.disabled:hover {
background:none;
color: #ccc;
}
</style>
</head>
<body>
<input type="tel" placeholder="請輸入手機號" name="Phone">
<a class="fasong" id="btnSend" style="cursor:pointer;">發送驗證碼</a>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script language="javascript">
$(function () {
//點擊發送驗證碼
$('body').on('click', '#btnSend', function () {
$('body').off('click', '#btnSend');
LockButton('#btnSend', 60);
})
//讀取cookie
if ($.cookie("djsendtime") != undefined && !isNaN($.cookie("djsendtime"))) { //讀取到了cookie值
var djsendtime = $.cookie("djsendtime");
var now = new Date().getTime(); //當前時間戳
var locksecends = parseInt((djsendtime - now) / 1000);
if (locksecends <= 0) {
$.cookie("djsendtime", null);
} else {
LockButton('#btnSend', locksecends);
}
}
})
// 按鈕倒計時
var LockButton = function (btnObjId, locksecends) {
//1.獲取當前系統時間
//2.獲取 locksecends 后的系統時間
//3.用cookie保存到期時間
//4.每次加載后獲取cookie中保存的時間
//5.用到期時間減去當前時間獲取倒計時
var djsendtime = $.cookie("djsendtime");
if (djsendtime == null || djsendtime == undefined || djsendtime == 'undefined' || djsendtime == 'null') {
var now = new Date().getTime(); //當前時間戳
var endtime = locksecends * 1000 + now; //結束時間戳
$.cookie("djsendtime", endtime); //將結束時間保存到cookie
}
$(btnObjId).addClass('disabled').attr('disabled', 'disabled').text('(' + locksecends + ')秒后重新獲取');
$('body').off('click', '#btnSendSMS');
var timer = setInterval(function () {
locksecends--;
$(btnObjId).text('(' + locksecends + ')秒后重新獲取');
if (locksecends <= 0) {
//倒計時結束清除cookie值
$.cookie("djsendtime", null);
$(btnObjId).removeClass('disabled').removeAttr('disabled').text('重新獲取');
$('body').on('click', btnObjId);
clearInterval(timer);
}
}, 1000);
};
</script>
</html>
運行：
無論怎么刷新，倒計時都會繼續不會重新開始