Jquery cookie插件实现点击获取验证码后60秒内禁止重新获取

位置:首页>文章>详情   分类: 教程分享 > Java教程   阅读(1600)   2023-03-28 11:29:14
Jquery cookie插件实现点击获取验证码后60秒内禁止重新获取,可直接拿走用
注意:本例子依赖一下库
1.jQuery
2.jQuery cookie
可根据自身环境进行修改

代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证码获取按钮防止刷新</title>
<link rel="stylesheet" type="text/css" href="../libs/bootstrap/bootstrap-3.3.7/css/bootstrap.css">
<style type="text/css">
.content{
	margin: 20px 0px 0px 20px;
}
</style>
</head>
<body>
<div class="form-inline content">
<h1>验证码获取按钮防止刷新</h1>
<div class="alert alert-info base64-de-out">
注意:<br>
1.本案例依赖jQuery;<br>
2.本案例依赖jQuery的cookie插件<br>
</div>
<input type="text" class="form-control" placeholder="请输入邮箱地址"><button class="btn btn-default test-btn">获取验证码</button>
</div>

<script type="text/javascript" src="../libs/jQuery/jquery.js"></script>
<script type="text/javascript" src="../libs/jQuery/plugins/cookie/jquery.cookie.js"></script>
<script type="text/javascript" src="../libs/bootstrap/bootstrap-3.3.7/js/bootstrap.js"></script>
<script type="text/javascript">

$(function(){
	var btn=$('.test-btn');
	//1.默认检测验证码按钮
	checkResendCode(btn);
	//2.绑定点击事件
	$(btn).click(function(){
		//do somthing
		//code ....
		
		//设置按钮状态
		resendCode(this);
	});
})

/**检查cookie中的验证码统计是否存在***/
function checkResendCode(btnObject)
{
	if($.cookie('captchaCount')){
		var count=$.cookie('captchaCount');
		//设置按钮的显示和不可用状态
		$(btnObject).html(count+'秒重新获取').attr('disabled',true);
		var resend=setInterval(function(){
            if (count > 0){
            	$(btnObject).html(count+'秒重新获取').attr('disabled',true).css('cursor','not-allowed');
                $.cookie("captchaCount", count, {path: '/', expires: (1/86400)*count});
            }else {
                clearInterval(resend);
                btn.html("获取验证码").attr('disabled',false);
            }
            count--;
		},1000);
	}
}
/**重新发送事件***/
function resendCode(btnObject)
{
	var count=60;
	var resend = setInterval(function(){
	       if (count > 0){
	    	   $(btnObject).html(count+"秒重新获取");
	           $.cookie("captchaCount", count, {path: '/', expires: (1/86400)*count});
	       }else {
	           clearInterval(resend);
	           $(btnObject).html("&nbsp;获取验证码&nbsp;").attr('disabled',false);
	       }
	       count--;
	   }, 1000);
	 $(btnObject).attr('disabled',true);
}

</script>

</body>
</html>

效果如下:
验证码重新获取按钮
 
地址:https://www.leftso.com/article/188.html

相关阅读

Jquery cookie插件实现点击获取验证码后60秒内禁止重新获取,可直接拿走用,jquery,验证码获取
java实现生成彩色背景图片验证码,在登陆和注册可以使用,工具类将图片的IO流通过response输出到浏览器,在浏览器中可以使用 img标签的src属性路径写上该工具类的访问路径即可。
jQuery的$.ajax()使用及API文档,jQuery,ajax,$.ajax()
jquery中的foreach(即each)数据的遍历或者处理HTML页面元素的遍历使用方法讲解
ie9 jquery ajax跨域问题解决, ajax ie9 跨域问题解决,jquery,ajax,ie9
jQuery之MD5加密插件使用及下载,网络中md5进行简单加密的地方越来越多。这里讲解一个jQuery的md5插件
js/jQuery获取textarea的光标位置实现光标位置插入内容
jQuery 取选中的radio的值方法,jQuery,radio
summernote 获取纯文本方法首先我们可以通过summernote api提供的方法获取到包含html标签的内容
spring validate 验证List集合演示用类User/Addressimport lombok.Data; import javax.validation.constraints....