Jquery插件实现点击获取验证码后60秒内禁止重新获取
通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取（防刷新）”的功能
效果图：
先到官网（http://plugins.jquery.com/cookie/）下载cookie插件，放到相应文件夹，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js" ></script>
<script src="jquery.cookie.js" ></script>
<style type="text/css">
* {margin: 0; padding: 0; font-family: "Microsoft Yahei";}
.captcha-box {width: 360px; height: 34px; margin: 30px; padding: 30px; border: #956E6F 1px dashed; border-radius: 5px; background-color: #FAF2F2;}
#mobile { float: left; width: 180px; height: 32px; border: #e5e5e5 1px solid; line-height: 32px; text-indent: 8px; outline: none;}
#getting {float: left; height: 34px; margin-left: -1px; padding: 0 18px; text-align: center; line-height: 34px; border: #e5e5e5 1px solid; background: linear-gradient(0deg, #f4f2f2 0%,#fbf9f9 100%); cursor: pointer; outline: none;}
</style>
<script>
$(function(){
/*仿刷新：检测是否存在cookie*/
if($.cookie("captcha")){
var count = $.cookie("captcha");
var btn = $('#getting');
btn.val(count+'秒后可重新获取').attr('disabled',true).css('cursor','not-allowed');
var resend = setInterval(function(){
count--;
if (count > 0){
btn.val(count+'秒后可重新获取').attr('disabled',true).css('cursor','not-allowed');
$.cookie("captcha", count, {path: '/', expires: (1/86400)*count});
}else {
clearInterval(resend);
btn.val("获取验证码").removeClass('disabled').removeAttr('disabled style');
}
}, 1000);
}
/*点击改变按钮状态，已经简略掉ajax发送短信验证的代码*/
$('#getting').click(function(){
var btn = $(this);
var count = 60;
var resend = setInterval(function(){
count--;
if (count > 0){
btn.val(count+"秒后可重新获取");
$.cookie("captcha", count, {path: '/', expires: (1/86400)*count});
}else {
clearInterval(resend);
btn.val("获取验证码").removeAttr('disabled style');
}
}, 1000);
btn.attr('disabled',true).css('cursor','not-allowed');
});
});
</script>
</head>
<body>
<div class="captcha-box">
<input type="text" id="mobile" maxlength="11" placeholder="请输入手机号码">
<input type="button" id="getting" value="获取验证码">
</div>
</body>
</html>
以上就是本文的全部内容了，希望大家能够喜欢。
-
本文向大家介绍js实现点击获取验证码倒计时效果，包括了js实现点击获取验证码倒计时效果的使用技巧和注意事项，需要的朋友参考一下 网站中为了防止恶意获取验证短信、验证邮箱，都会在点击获取验证码的按钮上做个倒计时的效果。实现这个功能，一个setInterval和一个clearInterval就能搞定了，不需要太多的代码。实例效果和代码如下： 更多关于倒计时的文章请查看专题：《倒计时功能》 利用setI
-
接口说明 获取验证码 如需调用，请访问 开发者文档 来查看详细的接口使用说明 该接口仅开放给已获取SDK的开发者 API地址 POST /api/server/1.0.0/getValidCode 是否需要登录 否 请求字段说明 无 响应字段说明 无 响应成功示例 {} 响应失败示例 {} 响应接受类型 image/jpeg;charset=UTF-8 响应状态码 HTTP状态码 原因 204 N
-
本文向大家介绍jQuery获取当前点击的对象元素(实现代码)，包括了jQuery获取当前点击的对象元素(实现代码)的使用技巧和注意事项，需要的朋友参考一下 jQuery获取当前点击的对象元素(实现代码) 以上这篇jQuery获取当前点击的对象元素(实现代码)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍简单实现vue验证码60秒倒计时功能，包括了简单实现vue验证码60秒倒计时功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue验证码倒计时60秒的具体代码，供大家参考，具体内容如下 html js 更多关于倒计时的文章请查看专题：《倒计时功能》 更多JavaScript时钟特效点击查看：JavaScript时钟特效专题 以上就是本文的全部内容，希望对大家的学习有
-
本文向大家介绍jQuery Validate表单验证插件实现代码，包括了jQuery Validate表单验证插件实现代码的使用技巧和注意事项，需要的朋友参考一下 1 表单验证的准备工作 在开启长篇大论之前，首先将表单验证的效果展示给大家。 1.点击表单项，显示帮助提示 2.鼠标离开表单项时，开始校验元素 3.鼠标离开后的正确、错误提示及鼠标移入时的帮
-
接口说明 获取验证码图片 如需调用，请访问 开发者文档 来查看详细的接口使用说明 该接口仅开放给已获取SDK的开发者 如开启https功能，请求地址的协议应改为https，如：https://www.example.com/wish3dearth/api/access/v1.0.0/getLicenseInfo API地址 GET /authcenter/api/verify/v1.0.0/cap