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

程序员文章站 2022-06-08 18:54:35

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

上一篇：美团回应武汉外卖员持刀行凶事件

下一篇： .net core搭建微服务一：服务注册