在這裡講一講這個案例的實現思路吧（個人見解）。。核心思想：為防止頁面刷新時倒計時失效的解決方案是：當每次刷新一次頁面時都執行一個函數 即下麵講到的 setStyle() 函數。這個函數會根據當前的 cookie 值判斷 是否處於倒計時階段 ，因為 cookie 值不會隨著 網頁的刷新而改變。 最後面 ...
在這裡講一講這個案例的實現思路吧（個人見解）。。核心思想：為防止頁面刷新時倒計時失效的解決方案是：當每次刷新一次頁面時都執行一個函數 即下麵講到的 setStyle() 函數。這個函數會根據當前的 cookie 值判斷 是否處於倒計時階段 ，因為 cookie 值不會隨著 網頁的刷新而改變。
最後面已附上全部代碼可直接複製下來借鑒一下。
1、本案例用到了 jQuery，第一步：頁面引入 jQuery。
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
2、第二步：HTML 部分，為演示方便 只需一個按鈕即可。
<button id="btn">獲取</button>
3、第三步：js 代碼部分。該部分 是採用操作 cookie 來實現 刷新頁面 倒計時不失效。
①點擊按鈕設置 cookie 、顯示倒計時時間以及禁用按鈕
$('#btn').click(function(){
$('#btn').text('倒計時30s'); // 倒計時
$('#btn').prop('disabled',true); //禁用按鈕
$(document)[0].cookie = 'ckey='+30; // 設置 cokie
});
②獲取當前 cookie 值
function getCookie(){
// 獲取全部的 cookie
var cookie = $(document)[0].cookie;
// 獲取 cookie 項 (數組)
var citem = cookie.split(';');
// 過濾數組 獲得 鍵為 ckey 的項
var ckey = citem.filter(function(item){
return item.split('=')[0].trim()=='ckey';
});
// 獲得 時間 cval
cval = ckey[0].split('=')[1];
return cval;
}
③防止頁面刷新時倒計時失效。解決方案是 每刷新一次頁面都要獲取當前的 cookie 值 ，如果值不為零的話一直是禁用狀態
function setStyle(){
var cval = getCookie();
if(cval>1){
$('#btn').text('倒計時'+cval+'s');
$('#btn').prop('disabled',true);
console.log('hahah')
}else{
$('#btn').text('獲取驗證碼');
$('#btn').prop('disabled',false);
}
}
setStyle();
④定時器實現倒計時
setInterval(function(){
setCookie();
console.log(1);
},1000)
function setCookie(){
var cval = getCookie();
if(cval>1){
$(document)[0].cookie = 'ckey='+(cval-1);
$('#btn').text('倒計時'+(cval-1)+'s');
$('#btn').prop('disabled',true);
}else if(cval==1){
$('#btn').text('獲取驗證碼');
$('#btn').prop('disabled',false);
$(document)[0].cookie = 'ckey='+0;
}
}
4、完整代碼 直接複製 即可使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <input type="text"> <button id="btn">獲取</button> <script> $('#btn').click(function(){ $('#btn').text('倒計時30s'); $('#btn').prop('disabled',true); // 設置 cookie 值 $(document)[0].cookie = 'ckey='+30; console.log('cookie 設置完畢'); }); function setStyle(){ var cval = getCookie(); if(cval>1){ $('#btn').text('倒計時'+cval+'s'); $('#btn').prop('disabled',true); console.log('hahah') }else{ $('#btn').text('獲取驗證碼'); $('#btn').prop('disabled',false); } } setStyle(); id = setInterval(function(){ setCookie(); console.log(1); },1000) function setCookie(){ var cval = getCookie(); if(cval>1){ $(document)[0].cookie = 'ckey='+(cval-1); $('#btn').text('倒計時'+(cval-1)+'s'); $('#btn').prop('disabled',true); }else if(cval==1){ $('#btn').text('獲取驗證碼'); $('#btn').prop('disabled',false); $(document)[0].cookie = 'ckey='+0; // clearInterval(id); } } function getCookie(){ // 獲取全部的 cookie var cookie = $(document)[0].cookie; // 獲取 cookie 項 (數組) var citem = cookie.split(';'); // 過濾數組 獲得 鍵為 ckey 的項 var ckey = citem.filter(function(item){ return item.split('=')[0].trim()=='ckey'; }); // 獲得 時間 cval cval = ckey[0].split('=')[1]; return cval; } </script> </body> </html>
