jQuery implements a 30s countdown for sending validation codes and is valid when refreshing pages

Here I will talk about the realization of this case (personal opinion)... Core idea: To prevent the countdown from failing when the page refreshes, the solution is to execute a function every time the page is refreshed, that is, the setStyle() function described below. This function determines whether the cookie value is in the countdown stage based on the current cookie value, because the cookie value will not change with the refresh of the page.

At last, all the codes are attached, which can be copied directly and used for reference.

1. jQuery is used in this case. The first step is to introduce jQuery into the page.

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

2. Step 2: HTML section, just one button for demonstration convenience.

<button id="btn">Obtain</button>

3. Step 3: js code section. In this part, cookie s are used to ensure that the countdown of refreshing pages is not invalid.

Click on the button to set cookie, display countdown time and disable the button

$('#btn').click(function(){
       $('#btn').text('countdown 30s'); // countdown
       $('#btn').prop('disabled',true); // disable button
       $(document)[0].cookie = 'ckey='+30;　　// Set cokie
});

(2) Get the current cookie value

function getCookie(){
            // Get all cookie s
            var cookie = $(document)[0].cookie;
            // Get cookie items (arrays)
            var citem = cookie.split(';');
            // Filter arrays to get items with keys ckey
            var ckey = citem.filter(function(item){
                return item.split('=')[0].trim()=='ckey';
            });
            // Acquisition time cval
            cval = ckey[0].split('=')[1];
            return cval;
        }

(3) Prevent page refresh countdown failure. The solution is to get the current cookie value for every page refresh, which is always disabled if the value is not zero.

function setStyle(){
            var cval = getCookie();
            if(cval>1){
                $('#Btn'. text ('countdown'+ cval+'s');
                $('#btn').prop('disabled',true);
               console.log('hahah')
            }else{
                $('#btn').text('Get Verification Code');
                $('#btn').prop('disabled',false);
            }
       }
       setStyle();

(4) Timer realizes countdown

setInterval(function(){
            setCookie();
            console.log(1);
        },1000)
        
function setCookie(){
    var cval = getCookie();
        if(cval>1){
               $(document)[0].cookie = 'ckey='+(cval-1);
               $('#Btn'. text ('countdown'+ (cval-1)+'s');
               $('#btn').prop('disabled',true);
         }else if(cval==1){
                $('#btn').text('Get Verification Code');
                $('#btn').prop('disabled',false);
                $(document)[0].cookie = 'ckey='+0;
         }
}

4. Complete code can be directly copied and used.

<!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">Obtain</button>
    <script>
        $('#btn').click(function(){
            $('#btn').text('Countdown 30 s');
            $('#btn').prop('disabled',true);
            // Set up cookie value
            $(document)[0].cookie = 'ckey='+30;
            console.log('cookie Set up');
            
       });
       function setStyle(){
            var cval = getCookie();
            if(cval>1){
                $('#btn').text('Count down'+cval+'s');
                $('#btn').prop('disabled',true);
               console.log('hahah')
            }else{
                $('#btn').text('Get the authentication 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('Count down'+(cval-1)+'s');
                $('#btn').prop('disabled',true);
            }else if(cval==1){
                $('#btn').text('Get the authentication code');
                $('#btn').prop('disabled',false);
                $(document)[0].cookie = 'ckey='+0;
                // clearInterval(id);
            }
        }
        function getCookie(){
            // Get all cookie
            var cookie = $(document)[0].cookie;
            // Obtain cookie term  (array)
            var citem = cookie.split(';');
            // Filter arrays to get keys as follows ckey Item
            var ckey = citem.filter(function(item){
                return item.split('=')[0].trim()=='ckey';
            });
            // Acquire time  cval
            cval = ckey[0].split('=')[1];
            return cval;
        }
    </script>
</body>
</html>

Keywords: Javascript JQuery IE

Added by tina88 on Sat, 05 Oct 2019 16:53:58 +0300

Programming VIP

jQuery implements a 30s countdown for sending validation codes and is valid when refreshing pages

Popular Keywords