jQuery短信验证倒计时功能实现方法详解
本文实例讲述了jQuery短信验证倒计时功能实现方法。分享给大家供大家参考,具体如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>demo短信验证码60秒,并限制次数</title> <scriptsrc="js/time.js"type="text/javascript"></script> </head> <body> <divclass="input"> <inputtype="button"id="btn"class="btn_mfyzm"value="获取验证码"/> </div> </body> <script> varwait=60*2; document.getElementById("btn").disabled=false; functiontime(o){ if(wait==0){ o.removeAttribute("disabled"); o.value="免费获取验证码"; wait=60*2; }else{ o.setAttribute("disabled",true); o.value="重新发送("+wait+")"; wait--; setTimeout(function(){ time(o) }, 1000) } } document.getElementById("btn").onclick=function(){time(this);} </script> </html>
time.js内容如下:
varInterValObj;//timer变量,控制时间 varcount=60;//间隔函数,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+"秒内输入验证码"); } }
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。