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 相关文章推荐
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
js的2种继承方式详解
Mar 04 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
js改变Iframe中Src的方法
May 05 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
ES6学习教程之对象字面量详解
Oct 09 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
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
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
php中使用GD库做验证码
2016/03/31 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
python局域网ip扫描示例分享
2014/04/03 Python
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python中format()格式输出全解
2019/04/12 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
Django框架请求生命周期实现原理
2020/11/13 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
音乐系毕业生自荐信
2013/10/27 职场文书
家长评语和期望
2014/02/10 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
2014年团总支工作总结
2014/11/21 职场文书
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang
Redis特殊数据类型bitmap位图
2022/06/01 Redis