一款jquery发送验证码计时器

 接上一篇的js发送验证码计时器，因为在发送验证码的时候要提前进行检查的，看看数据库里面有没有这条数据，之前的代码都是使用 jquery 来写的，所以在 jquery 里面去调用 js 的计时器就很难了，没办法，只好再写一款 jquery 的验证码计时器了，当然也是从网上找的一款计时器，加上自己小小的修改和之前的代码进行整合了，我们先看看单独的 jquery 计时器代码，如下：

 
  1. <script type="text/javascript" src="jquery.min.js"></script>  
  2. </head>  
  3. <body>  
  4.     <h1>发送验证码</h1>  
  5.       
  6.     <input type="button" id="count-send" value="发送验证码到手机" />  
  7.       
  8.     <script type="text/javascript">  
  9.         $(function(){  
  10.             var times=5; //60秒后重新发送，保存到变量  
  11.             $('#count-send').click(function(){  
  12.                 var that=$(this); //dxpang.com  
  13.                 timeSend(that);  
  14.             });  
  15.               
  16.             function timeSend(that){  
  17.                 if(times==0){  
  18.                     that.removeAttr('disabled').val('点击重新发送验证码');  
  19.                     that.css('background','原颜色')  
  20.                     times=5;  
  21.                 }else{  
  22.                     that.attr('disabled',true).val(''+times+'秒后重新发送');  
  23.                       
  24.                     that.css('background','点击后的颜色')  
  25.                       
  26.                     times--;  
  27.                     setTimeout(function(){  
  28.                      timeSend(that);  
  29.                     },1000);  
  30.                 }  
  31.             }  
  32.         })  
  33.     </script>  

好了，再把自己整合的网贷系统源码部分给贴出来吧，仅供自己查看，代码如下：

 
  1. $("#getcode").click(function(){  
  2.       
  3.     var times=60; //60秒后重新发送，保存到变量  
  4.     var that=$(this);  
  5.       
  6.     var ajaxurl = '{wap_url a="index" r="send_register_code"}';  
  7.     var query = new Object();  
  8.     query.mobile = $.trim($("#phone").val());  
  9.     query.post_type = "json";  
  10.     $.ajax({  
  11.         url:ajaxurl,  
  12.         data:query,  
  13.         type:"Post",  
  14.         dataType:"json",  
  15.         success:function(data){  
  16.             if(data.response_code==0)  
  17.             {  
  18.                 alert(data.show_err);  
  19.             }  
  20.             else  
  21.             {  
  22.                 alert('发送成功');  
  23.                 timeSend(that);  
  24.             }  
  25.               
  26.         }  
  27.     });  
  28.       
  29.     function timeSend(that){  
  30.         if(times==0){  
  31.             that.removeAttr('disabled').val('发送验证码');  
  32.             that.css('background','#5DC9E6')  
  33.             times=60;  
  34.         }else{  
  35.             that.attr('disabled',true).val(''+times+'秒后重新发送');  
  36.             that.css('background','#848484')  
  37.             times--; //dxpang.com  
  38.             setTimeout(function(){  
  39.              timeSend(that);  
  40.             },1000);  
  41.         }  
  42.     }  
  43.       
  44. });  

这个代码是先进行正则表达式和数据库的认证，如果错误的话，按钮不变，如果正确的话，发送验证码，然后按钮变灰为不能点击的状态，当然还有计时器从60秒开始倒数，倒数成功之后再开始变化为可点击的状态，使用的时候都要包含 jquery.js。

扫一扫手机访问