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程序设计有所帮助。