在这里讲一讲这个案例的实现思路吧(个人见解)。。核心思想:为防止页面刷新时倒计时失效的解决方案是:当每次刷新一次页面时都执行一个函数 即下面讲到的 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>
在传统的 Web 开发过程中,处理图形验证码很简单,只需要在后台用随机字符串生成一个图片,将验证码内容放进 Session 即可,用户提交表单时从 Session[1] 取出判断即可。
用于一些注册类的场景,点击发送验证码,xx秒后重新发送。利用 setTimeout 方法,xx秒后执行指定的方法,修改button的属性值,disabled为true时为灰色,不可点击。
细心的同学可以发现,现在很多网站当登录多次之后就会出现一个图形验证码,或是当提交表单、或点击获取手机验证码等等场景都会有图形验证码的出现。那么图形验证码是为了解决什么问题而出现的呢?
最近接的新项目,登录注册页根据需求要使用手机号获取验证码登录或者注册,一开始的想法是要做6个inputshur输入框,但是光标问题太严重。在网上看别人的实现方法,发现可以用一个input+6个span或者6个div来做,经过构思
网站中为了防止恶意获取验证短信、验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果。比如:做注册页面时会有获取验证码按钮,点击后过60秒才能重新获取,数字是递减的到0时重新回到最初的状态。实现这个功能只需要一个setInterval和一个clearInterval就能搞定了
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!