jQuery实现倒计时按钮功能代码分享
代码一:
{ wait:90, hsTime:function(that){ if(this.wait==0){ $('#hsbtn').removeAttr("disabled").val('重发短信验证码'); this.wait=90; }else{ var_this=this; $(that).attr("disabled",true).val('在'+_this.wait+'秒后点此重发'); _this.wait--; setTimeout(function(){ _this.hsTime(that); },1000) } }, }
代码二:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <scriptsrc="HTML/js/jquery-1.4.1.min.js"type="text/javascript"></script> <scripttype="text/javascript"> /*-------------------------------------------*/ varInterValObj;//timer变量,控制时间 varcount=5;//间隔函数,1秒执行 varcurCount;//当前剩余秒数 varcode="";//验证码 varcodeLength=6;//验证码长度 functionsendMessage(){ curCount=count; vardealType;//验证方式 varuid=$("#uid").val();//用户uid if($("#phone").attr("checked")==true){ dealType="phone"; } else{ dealType="email"; } //产生验证码 for(vari=0;i<codeLength;i++){ code+=parseInt(Math.random()*9).toString(); } //设置button效果,开始计时 $("#btnSendCode").attr("disabled","true"); $("#btnSendCode").val("请在"+curCount+"秒内输入验证码"); InterValObj=window.setInterval(SetRemainTime,1000);//启动计时器,1秒执行一次 //向后台发送处理数据 $.ajax({ type:"POST",//用POST方式传输 dataType:"text",//数据格式:JSON url:'Login.ashx',//目标地址 data:"dealType="+dealType+"&uid="+uid+"&code="+code, error:function(XMLHttpRequest,textStatus,errorThrown){}, success:function(msg){} }); } //timer处理函数 functionSetRemainTime(){ if(curCount==0){ window.clearInterval(InterValObj);//停止计时器 $("#btnSendCode").removeAttr("disabled");//启用按钮 $("#btnSendCode").val("重新发送验证码"); code="";//清除验证码。如果不清除,过时间后,输入收到的验证码依然有效 } else{ curCount--; $("#btnSendCode").val("请在"+curCount+"秒内输入验证码"); } } </script> </head> <body> <inputid="btnSendCode"type="button"value="发送验证码"onclick="sendMessage()"/></p> </body> </html>
代码三:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>10之后注册</title> <scriptsrc="../js/jquery-1.6.2.min.js"type="text/javascript"></script> <scripttype="text/javascript"language="javascript"> varleftSeconds=10;//倒计时时间10秒 varintervalId; $(function(){ $("#btn_reg").attr("disabled",true);//设置按钮不可用 intervalId=setInterval("CountDown()",1000);//调用倒计时的方法 }); functionCountDown(){//倒计时方法 if(leftSeconds<=0){ $("#btn_reg").val("注册");//当时间<=0的时候改变按钮的value $("#btn_reg").attr("disabled",false);//如果时间<=0的时候按钮可用 clearInterval(intervalId);//取消由setInterval()设置的timeout return; } leftSeconds--; $("#btn_reg").val("请仔细阅读"+leftSeconds+"秒"); } </script> </head> <body> <textareacols="20"rows="8">10秒之后注册按钮才可以使用</textarea> <inputtype="button"value="注册"id="btn_reg"/> </body> </html>
代码四:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <scriptsrc="HTML/js/jquery-1.4.1.min.js"type="text/javascript"></script> <scripttype="text/javascript"> /*-------------------------------------------*/ varInterValObj;//timer变量,控制时间 varcount=5;//间隔函数,1秒执行 varcurCount;//当前剩余秒数 varcode="";//验证码 varcodeLength=6;//验证码长度 functionsendMessage(){ curCount=count; vardealType;//验证方式 varuid=$("#uid").val();//用户uid if($("#phone").attr("checked")==true){ dealType="phone"; } else{ dealType="email"; } //产生验证码 for(vari=0;i<codeLength;i++){ code+=parseInt(Math.random()*9).toString(); } //设置button效果,开始计时 $("#btnSendCode").attr("disabled","true"); $("#btnSendCode").val("请在"+curCount+"秒内输入验证码"); InterValObj=window.setInterval(SetRemainTime,1000);//启动计时器,1秒执行一次 //向后台发送处理数据 $.ajax({ type:"POST",//用POST方式传输 dataType:"text",//数据格式:JSON url:'Login.ashx',//目标地址 data:"dealType="+dealType+"&uid="+uid+"&code="+code, error:function(XMLHttpRequest,textStatus,errorThrown){}, success:function(msg){} }); } //timer处理函数 functionSetRemainTime(){ if(curCount==0){ window.clearInterval(InterValObj);//停止计时器 $("#btnSendCode").removeAttr("disabled");//启用按钮 $("#btnSendCode").val("重新发送验证码"); code="";//清除验证码。如果不清除,过时间后,输入收到的验证码依然有效 } else{ curCount--; $("#btnSendCode").val("请在"+curCount+"秒内输入验证码"); } } </script> </head> <body> <inputid="btnSendCode"type="button"value="发送验证码"onclick="sendMessage()"/></p> </body> </html>
代码五:
最近在写短信发送验证码,就写了个js/jquery倒计时发送验证码按钮 <scriptlanguage="javascript"src="jquery-1.7.1.min.js"></script> <inputtype="button"id="btn"value="免费获取验证码"/> <scripttype="text/javascript"> varwait=10; functiontime(t){ if(wait==t){ t.removeAttribute("disabled"); t.value="免费获取验证码"; wait=10; }else{ t.setAttribute("disabled",true); t.value="重新发送("+wait+")"; wait--; setTimeout(function(){ time(t) }, 1000) } } $(document).ready(function(){ $("#btn").click(function(){ time(this); }); }); </script>