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 相关文章推荐
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
js获取系统的根路径实现介绍
Sep 08 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 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
PHP下MAIL的另一解决方案
2006/10/09 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
Javascript 跨域访问解决方案
2009/02/14 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
九步学会Python装饰器
2015/05/09 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
wxPython实现画图板
2020/08/27 Python
执行Python程序时模块报错问题
2020/03/26 Python
Python request使用方法及问题总结
2020/04/26 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
小学生竞选班干部演讲稿
2014/04/24 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
2016保送生自荐信范文
2016/01/29 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏