jQuery实现发送验证码30s倒计时,且刷新页面时有效
程序员文章站
2024-02-05 16:53:10
在这里讲一讲这个案例的实现思路吧(个人见解)。。核心思想:为防止页面刷新时倒计时失效的解决方案是:当每次刷新一次页面时都执行一个函数 即下面讲到的 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>