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(" 获取验证码 ").attr('disabled',false);
}
count--;
}, 1000);
$(btnObject).attr('disabled',true);
}
</script>
</body>
</html>
效果如下:
https://blog.xqlee.com/article/188.html
评论
相关文章
java实现生成彩色背景图片验证码，在登陆和注册可以使用，工具类将图片的IO流通过response输出到浏览器，在浏览器中可以使用
img标签的src属性路径写上该工具类的访问路径即可。
jQuery select 获取值$title(方法一：)
let val=$('#selectId').val(); //获取选中值 $title(方法二：)
let val=$('#se...
jquery/j获取raido选中元素/选中值html<div id="testRaidoGroup">l;<input type="radio" name="te
尽管现在前端技术发展飞速发展，各种技术迭代很快，但jQuery还是在一些企业站或者简单网页尝尝用到，本文记录一下学写jQuery插件的内容，愿新手共勉，共同进步
js/jQuery获取textarea的光标位置实现光标位置插入内容
spring validate 验证List集合演示用类User/Addressimport lombok.Data;
import javax.validation.constraint...
jquery绑定鼠标滚轮滚动事件 $(document).on("mousewheel DOMMouseScroll", function (event) {
1.开通商户号
登录 https://pay.wexin.qq.com 注册并开通商户号。
2.开通【微信收款码商业版】
https://pay.wexin.qq.com 打开...
jquery模拟点击事件写法//语法:$(selector).trigger("click");$('#test).trigger("click"); over