Jquery简单的发送验证码倒计时

来源：互联网发布：install brew on mac 编辑：程序博客网时间：2024/05/16 06:41

Jquery简单的发送验证码倒计时

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" href="@{'/public/stylesheets/main/accountSet.css'}">    <script type="text/javascript" src="../../public/javascripts/jquery-2.0.js"></script>    <script type="text/javascript" src="@{'/public/javascripts/common.js'}"></script></head><body>    <div class="padding3040">        <div class="safe_inputw">            <span class="safe_que">电子邮箱：</span>            <input type="text" placeholder="请输入您的邮箱" id="email"  onblur="checkEmail()">             <p id="emailMsg" class="safe_inputerror_display" style="margin-left:96px;"></p>        </div>        <div class="safe_inputw">            <span class="safe_que">邮箱验证码：</span>            <input type="text" placeholder="请输入验证码" onblur="checkCode();" id="code" style="width:100px;">               <input type="button" id="btn" onclick="getCheckCode();" class="safe_button" value="获取验证码" style="width:120px;">             <p id="codeMsg" class="safe_inputerror_display" style="margin-left:96px;"></p>        </div>    </div>    <a id="activeEmail" onclick="emailSubmit();" class="zrh_safe_button margin-left250">提交</a>    <p id="errorMsg" class="safe_inputerror_display" style="margin-left:96px;"></p>    <!-- 邮箱认证弹窗 结束--></body><script type="text/javascript">function checkEmail(){                  var _input=$("#email");                  var _val=$.trim(_input.val());                  var _tips=$("#emailMsg");                  _tips.html("");                if(_val==""){                    _tips.removeClass().addClass("safe_inputerror");                     _tips.html("请输入邮箱");                     return false;                  }                if (!_val.isEmail()) {                    _tips.removeClass().addClass("safe_inputerror");                     _tips.html("请输入正确的邮箱");                     return false;                }                _tips.removeClass().addClass("safe_inputerror_display");//成功标识                return true;          }          function checkCode(){                var _input=$("#code");                var _val=$.trim(_input.val());                var _tips=$("#codeMsg");                _tips.html("");                if(_val==""){                    _tips.removeClass().addClass("safe_inputerror");                     _tips.html("请输入验证码");                     return false;                }                _tips.removeClass().addClass("safe_inputerror_display");//成功标识                return true;          }     function  getCheckCode(){             if(checkEmail()){                 var _tips=$("#errorMsg");                 var email = $("#email").val().trim();                 var verifyMobile = #{jsAction @front.account.LoginAndRegisterAction.verifyEmail(':email')/}                    $.post(verifyMobile({email:email}),function(data){                        var arr = eval(data);                                               if(arr.error.code < 0)                        {                            _tips.removeClass().addClass("safe_inputerror");                            _tips.html(arr.error.msg);                            return;                        }                         else                        {                            disableButtonByClock(60);                        }                    });             }    }//发送短信倒计时代码function disableButtonByClock(seconds){            $("#btn").removeClass().addClass("safe_button_before").attr("disabled",true);            $("#btn").val("重新发送"+seconds+"s");  //让该按钮显示剩下多少时间才可以启用            var time=parseInt(seconds);                   //将传入的参数转为整型数字            if(time==0){                 $("#btn").val("获取验证码");                $("#btn").removeClass().addClass("safe_button").attr("disabled",false);            }else{                setTimeout("disableButtonByClock("+(time-1)+")",1000);  //1秒以后 再次调用本身这个方法            }           }</script></html>

css

*{margin:0;padding:0;font-family:'Microsoft Yahei';}ul li{list-style:none;}.padding3040{padding:30px 40px;}.displaynone{display:none;}.text-center{text-align:center;color:#595758;}.zrh_safe_button{background:#00a9ea;color:#fff;display:inline-block;    border-radius:5px;font:normal 16px/40px 'Microsoft Yahei';    width:120px;height:40px;text-align:center;cursor: pointer;}.disabled{background:#999 !important;color:#fff !important;}.margin-top20{margin-top:20px;}.zrh_safe_button:hover{background: -moz-linear-gradient(top,  #549cde 0%, #00a9ea 100%);background: -webkit-linear-gradient(top,  #549cde 0%,#00a9ea 100%);background: -ms-linear-gradient(top,  #549cde 0%,#00a9ea 100%);background: linear-gradient(top,  #549cde 0%,#00a9ea 100%); }/*安全问题*/.zrh_safeQ_ul{}.zrh_safeQ_ul li{font:normal 14px/40px 'Microsoft Yahei';color:#595758;padding-left:90px;}.zrh_safeQ_ulspan{color:red;}.margin-left70{margin:20px 0 0 98px;}.zrh_safeQ_ul li input{width:200px;height:36px;padding-left:5px;    border:1px solid #dcdcdc;background:#fff;}.zrh_safeQ_ul select{width:207px;height:30px;*width:207px;_width:207px;    border:1px solid #dcdcdc;background:#fff;}.safe_que{width: 100px;display:inline-block;text-align:right;}.zrh_safe_smallfont{font:normal 13px/30px 'Microsoft Yahei';    color:#888;margin-left:5px;}.zrh_safe_smallfont:hover{color:#00a9ea;}.margin-left250{margin-left:240px;}.margin-top120{margin-top:110px;}.zrh_loginPassword_ul li{font:normal 14px/40px 'Microsoft Yahei';color:#595758;padding-left:70px;margin-top:10px;}.zrh_loginPassword_ul li span{width:100px;text-align:right;display:inline-block;}.zrh_loginPassword_ul li input{width:250px;height:36px;padding-left:5px;    border:1px solid #dcdcdc;background:#fff;}.zrh_bindMoblie_ul{width:100%;height:80px;background:#ff9900}.zrh_bindMoblie_ul li{float:left;width:100px;background:pink;    font:normal 14px/40px 'Microsoft Yahei';text-align:center;}.zrh_bindMoblie_ul li div{width:40px;height:40px;background:#00a9ea;color:#fff;    -webkit-border-radius:20px;-moz-border-radius:20px;    -moz-border-radius: 20px 20px 20px 20px;border-radius: 20px 20px 20px 20px}.zrh_bindMoblie_ul li p{}/*验证手机*/.safet_wrap{width:338px;height:40px;margin:20px auto 10px;_margin-left:120px;}.safet_wrap img{width:338px;height:40px;}.safet_em{width:500px;height:30px;margin:10px 0 0 96px;}.safet_em em{width:146px;display:inline-block;    font:normal 14px/30px 'Microsoft Yahei';color:#888;}.safet_em .safet_emon{color:#333;}.safe_inputw{margin:20px 0 10px 100px;    font:normal 14px/36px 'Microsoft Yahei';}.mgLeft{margin:20px 0 10px 80px;}.queWidth{ width: 120px; }.safe_inputw label{width:80px;display:inline-block;    text-align:right;padding-right:14px;}.safe_inputw input{width:200px;height:36px;padding-left:10px;    border:1px solid #dcdcdc;background:#fff;}.safe_inputerror{padding-left:30px;margin-left:85px;width:200px;height:34px;    font:normal 13px/34px 'Microsoft Yahei';color:#666;background:url(../../images/main/part/icon_error_s.png) no-repeat 8px 8px;}.safe_inputerror_display{padding-left:30px;margin-left:85px;width:200px;height:34px;    font:normal 13px/34px 'Microsoft Yahei';color:#666;background:url(../../images/main/part/icon_error_s.png) no-repeat 8px 8px;display:none}.safe_inputw .safe_button{width:120px;height:35px;background:#fff;    border:1px solid #dcdcdc;background:#f3f3f3;text-align:center;    box-shadow:0px 3px 0px #00a8ea;    -webkit-box-shadow:0px 3px 0px #00a8ea;    -moz-box-shadow:0px 3px 0px #00a8ea;    margin-left:5px;vertical-align:top;    cursor:pointer;}.safe_inputw .safe_button:hover{height:37px;    box-shadow:0px 1px 0px #00a8ea;}.safe_inputw .safe_button_before{text-align:center;    width:120px;height:35px;margin-left:5px;vertical-align:top;    cursor:pointer;font:normal 14px/35px 'Microsoft Yahei';    background:#999;color:#fff;}.safe_success{width:400px;margin:60px auto;}.safe_successMG{margin:20px auto;}.safe_sucimg{float:left; margin-left: 50px;}.safe_sucp{font:normal 20px/42px 'Microsoft Yahei';vertical-align:top;display:inline-block;padding-left:20px;color:#888;}.color42C175{color:#42C175;font:normal 16px/40px Arial;margin-left:60px;}.color777{color:#777;font:normal 14px/40px Arial;margin-left:60px;}/*添加银行卡*/.safe_inputw select{height:36px;line-height:36px;min-width: 100px;*width:120px;}.safe_inputw input{line-height:36px;border:1px solid #dcdcdc;background:#fff;}/*找回密码*/.findPassWarp{ width: 100%; text-align: center; }.findPassWarp .okbtn{width: 100px;    height: 30px;    background: #00a8ea;    border-radius: 5px;    text-align: center;    font-size: 16px;    color: #fff;    line-height: 30px;    margin: 0 auto;    display: block;    text-decoration: none;}

1 0