Let’s talk about the realization of this case here (personal opinion). Essence Core idea: To prevent the solution to prevent the countdown failure when the page is refreshing, it is: a function is executed every time the page is refreshed, that is, the SetStyle () function mentioned below. This function will determine whether it is in the countdown stage based on the current cookie value, because the cookies value will not change with the refreshing of the webpage.
At the end, all the code has been attached to the reference directly.
1. This case uses jQuery, the first step: the page introduces jQuery.
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
2, Step 2: HTML section, only one button for demo is convenient.
<button id="btn">Get</button>
3. Step 3: JS code part. This part is adoptedOperation cookie to achieve refresh the page countdown without failure。
① Click the button to set cookies, display countdown time, and disabled buttons
$ ('# btn'). Click (function () {
$ ('#btn'). Text ('Countdown 30s'); // Countdown
$ ('#btn'). PROP ('Disabled', TRUE); // Disable button
$ (docume) [0] .Cookie = 'CKEY ='+30; // Set Cokie
});
② Get the current cookie value
function getCookie () {
// Get all the cookies
var cookie = $ (document) [0] .cookie;
// Get the cookie item (array)
var citem = cookie.split (';');
// Filter the array to get the key to CKEY
var ckey = citem.filter (function (item) {
Return item.split ('=') [0] .trim () == 'cKEY';
});
// Get time CVAL
cval = cKEY [0] .split ('=') [1];
Return cval;
}
③ Prevent the countdown to fail to get invalid when the page is refreshed. The solution is to get the current cookie value every time you refresh. If the value is not zero, it is a disabled state
function setstyle () {
var cval = getCookie ();
if (cval> 1) {{
$ ('#btn'). Text ('countdown'+cval+'s');
$ ('#btn'). Prop ('Disabled', True);
console.log ('hahah')
} Else {
$ ('#btn'). Text ('Get the verification code');
$ ('#btn'). PROP ('Disabled', FALSE);
}
}
setstyle ();
④ Timer implementation countdown
SetInterval (Function () {
setcookie ();
console.log (1);
}, 1000)
function setCookie () {
var cval = getCookie ();
if (cval> 1) {{
$ (docume) [0] .Cookie = 'CKEY ='+(CVAL-1);
$ ('#btn'). Text ('countdown'+(cval-)+'s');
$ ('#btn'). Prop ('Disabled', True);
} Else if (CVAL == 1) {{
$ ('#btn'). Text ('Get the verification code');
$ ('#btn'). PROP ('Disabled', FALSE);
$ (docume) [0] .Cookie = 'CKEY ='+0;
}
}
4. Copy the complete code and copy it directly
<!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">Get</button> <script> $('#btn').click(function(){ $('#btn').text('Countdown 30s'); $('#btn').prop('disabled',true); //Set cookies $(document)[0].cookie = 'ckey='+30; console.log('cookie settings are complete'); }); function setStyle(){ var cval = getCookie(); if(cval>1){ $('#btn').text('countdown'+cval+'s'); $('#btn').prop('disabled',true); console.log('hahah') }else{ $('#btn').text('Get the verification code'); $('#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('Countdnds'+(cval-1)+'s'); $('#btn').prop('disabled',true); }else if(cval==1){ $('#btn').text('Get the verification code'); $('#btn').prop('disabled',false); $(document)[0].cookie = 'ckey='+0; // clearInterval(id); } } function getCookie(){ //Get all Cookie var cookie = $(document)[0].cookie; //Get Cookie item (array) var citem = cookie.split(';'); //Filter array Get the key to CKEY var ckey = citem.filter(function(item){ return item.split('=')[0].trim()=='ckey'; }); //Get time CVAL cval = ckey[0].split('=')[1]; return cval; } </script> </body> </html>
Reprinted: https://www.cnblogs.com/zjl-712/P/11407335.html