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 相关文章推荐
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 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运行速度的一些小技巧分享
2012/07/03 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
学习面向对象之面向对象的术语
2010/11/30 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
javascript的回调函数应用示例
2014/02/20 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
python读取oracle函数返回值
2016/07/18 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
学校司机岗位职责
2013/11/14 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
腾讯广告词
2014/03/19 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
个人年度总结报告
2015/03/09 职场文书
医德医风学习心得体会
2016/01/25 职场文书
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
设置IIS Express并发数
2022/07/07 Servers