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


Posted in Javascript onMarch 13, 2015

通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取(防刷新)”的功能

效果图:

Jquery插件实现点击获取验证码后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>

以上就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 Javascript
vue完美实现el-table列宽自适应
May 08 Vue.js
node.js [superAgent] 请求使用示例
Mar 13 #Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 #Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 #Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 #Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 #Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 #Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 #Javascript
You might like
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
javascript 写类方式之四
2009/07/05 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
浅析Jquery操作select
2016/12/13 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
对python过滤器和lambda函数的用法详解
2019/01/21 Python
python验证身份证信息实例代码
2019/05/06 Python
python实现吃苹果小游戏
2020/03/21 Python
python 如何对logging日志封装
2020/12/02 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
轻松制作精彩视频:Animoto
2018/09/19 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
JAVA代码查错题
2014/10/10 面试题
乡镇食品安全责任书
2014/07/28 职场文书
民间个人借款协议书
2014/09/30 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
消防安全月活动总结
2015/05/08 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
实习感想范文
2015/08/10 职场文书
Django框架中视图的用法
2022/06/10 Python