首页> 文章> 详情

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

教程分享 > Java教程 (2430) 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
spring validate 验证List集合演示用类User/Addressimport lombok.Data; import javax.validation.constraint...
summernote 获取纯文本方法首先我们可以通过summernote api提供的方法获取到包含html标签的内容
java生成带参数二维码,java怎么生成二维码?java生成二维码工具类。如果你还在寻求这些问题的解答就进来看看吧。
在本文中,我们将讨论如何使用Bean Validation 2.0(JSR-380)定义和验证方法约束。在前面的文章中,我们讨论了JSR-380及其内置的注释,以及如何实现属性验证。在这里,我们...
在这篇快速文章中,我们将介绍使用标准框架 - JSR 380(也称为Bean Validation 2.0)来验证Java bean的基础知识。当然,在大多数应用程序中验证用户输入是超常见的需求...
Spring mvc文件下载IE/Edge中文乱码解决,在spring mvc项目开发中,我们可能经常遇到文件的上传和下载操作。这里将讲解在IE/Edge浏览器中文件下载中文乱码的解决方法。