jQuery实现发送验证码30s倒计时，且刷新页面时有效

时间：2022-03-29 15:48:34

在这里讲一讲这个案例的实现思路吧（个人见解）。。核心思想：为防止页面刷新时倒计时失效的解决方案是：当每次刷新一次页面时都执行一个函数 即下面讲到的 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>

相关文章