When sending a verification code to achieve jQuery 30s countdown, effective and refresh the page

Here to talk about the realization of ideas of this case it (personal opinion). . The core idea: To prevent the page refresh when the countdown failure solution: each time the page is refreshed perform a function that is mentioned below setStyle () function. This function is in the countdown stage based on the current cookie value judgment, because the cookie value does not change with the refresh the page.

Rearmost have attached all the code can be copied directly down and learn from it.

1. This case uses jQuery, the first step: page introduction jQuery.

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

2. The second step: HTML part, to facilitate the presentation just a button.

<button id="btn">获取</button>

3, the third step : js generation of code section. This part is the use of operational cookie countdown to achieve refresh the page does not fail .

① Click the button to set the cookie, and disabling button to display the countdown time

$ ( 'BTN #') the Click (function () {. 
       $ ( 'BTN #') text ( 'Countdown 30s');. // countdown 
       . $ ( '# btn') prop ( 'disabled', true); // disable button 
       $ (document) [0] .cookie = 'ckey =' + 30; // set Cokie 
});

② Get the current value of the cookie

the getCookie function () { 
            // Get all cookie 
            var cookie = $ (Document) [0] .cookie; 
            // Get cookie item (array) 
            var cItem cookie.split = ( ';'); 
            // get the filter key array the entry for the CKey 
            var CKey = citem.filter (function (item) { 
                return item.split ( '=') [0] .trim () == 'CKey'; 
            }); 
            // get time CVAL 
            CVAL CKey = [ 0] .split ( '=') [. 1]; 
            return CVAL; 
        }

③ prevent failure of the countdown when the page is refreshed. The solution is to have every page refresh to get the current value of the cookie, if the value is not zero, then it has been disabled

function the setStyle () { 
            var CVAL = the getCookie (); 
            IF (CVAL>. 1) { 
                $ ( '# BTN') text ( 'count down' + CVAL + 'S');. 
                . $ ( '# BTN') prop ( 'Disabled' , to true); 
               the console.log ( 'hahah') 
            } the else { 
                $ ( '# BTN') text ( 'Get codes');. 
                . $ ( 'BTN #') prop ( 'Disabled', to false); 
            } 
       } 
       the setStyle ();

④ achieve countdown timer

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. Copy the complete code can be used 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">获取</button>
    <script>
        $('#btn').click(function(){
            $('#btn').text('倒计时30s');
            $('#btn').prop('disabled',true);
            // set the cookie value 
            $ (Document) [ 0 ] .cookie =  ' CKey = ' + 30 ; 
            the console.log ( ' cookie set up ' ); 
            
       }); 
       function the setStyle () {
             var CVAL = the getCookie ();
             IF ( CVAL > . 1 ) { 
                $ ( ' #btn ' ) .text ( ' count down ' + 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 ' , to true ); 
            } the else  IF (CVAL == . 1 ) { 
                $ ( ' #btn ' ) .text ( ' Get codes ' ); 
                $ ( ' #btn ' ) .prop ( ' Disabled ' , to false ); 
                $ (Document) [ 0 ] .cookie =  ' CKey = ' + 0;
                 // the clearInterval (ID); 
            } 
        } 
        function the getCookie () {
             // Get all cookie 
            var cookie = $ (Document) [ 0 ] .cookie;
             // Get cookie item (array) 
            var cItem = cookie.split ( ' ; ' );
             // filter array obtained for the CKey key entry 
            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 >

When sending a verification code to achieve jQuery 30s countdown, effective and refresh the page

Guess you like