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

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


先到官网(http://plugins.jquery.com/cookie/ )下载cookie插件,放到相应文件夹,代码如下:

[js] view plaincopy
<!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="<a href="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js" target="_blank" <a="">http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js</a> " ></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> 

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

参考来源:
Jquery插件实现点击获取验证码后60秒内禁止重新获取
http://www.lai18.com/content/349866.html

你可能感兴趣的:(Jquery插件实现点击获取验证码后60秒内禁止重新获取)