js/jquery实现免费获取手机验证码倒计时效果

[导读] 今天要开发一个功能就是当用户点击获取验证码之后我们会发送一条信息到用户手机，然后就会出现一个倒计时按钮，很像支付宝手机付款效果了，下面我给大家分享两个js效果。js代码 代码如下复制代码 <di

今天要开发一个功能就是当用户点击获取验证码之后我们会发送一条信息到用户手机，然后就会出现一个倒计时按钮，很像支付宝手机付款效果了，下面我给大家分享两个js效果。
js代码

代码如下

复制代码

<div class="input">     <input type="button" id="btn" class="btn_mfyzm" value="免费获取验证码" />    <script type="text/javascript"> var wait=5; document.getElementById("btn").disabled = false;   function time(o) {         if (wait == 0) {             o.removeAttribute("disabled");                       o.value="免费获取验证码";             wait = 5;         } else {             o.setAttribute("disabled", true);             o.value="重新发送(" + wait + ")";             wait--;             setTimeout(function() {                 time(o)             },             1000)         }     } document.getElementById("btn").onclick=function(){time(this);} </script> </div>

jquery

代码如下	复制代码
<li><span class="txt_name">验证码：</span><span class="code"  onclick="getVerify();" id="timeb1" style="cursor:pointer">免费获取验证码</span><input class="input_code" autocomplete="off" onblur="if(this.value=='') this.value='';" onfocus="if(this.value=='') this.value='';" value="" type="text"  name="verifyCode"  id="verifyCode" ></li>

js代码

代码如下

复制代码

function f_timeout(){    $('#timeb1').html('<span id="timeb2">60</span>秒后重新获取');  $('#timeb1').click(function(){});  timer = self.setInterval(addsec,1000); } function addsec(){    var t = $('#timeb2').html();  //alert(t);  if(t > 0){      $('#timeb2').html(t-1);   //alert(t);  }else{      window.clearInterval(timer);   $('#timeb1').html('<span id="timeb2"></span>重新获取验证码');   $('#timeb1').click(function(){getVerify();});  }   }