jQuery短信验证倒计时功能实现方法详解

本文实例讲述了jQuery短信验证倒计时功能实现方法。分享给大家供大家参考，具体如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head><title>demo 短信验证码60秒，并限制次数</title><script src="js/time.js" type="text/javascript"></script></head><body><div class="input"><input type="button" id="btn" class="btn_mfyzm" value="获取验证码" /></div></body><script>var wait=60*2;document.getElementById（"btn"）.disabled = false;function time（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内容如下:

var InterValObj; //timer变量，控制时间var count = 60; //间隔函数，1秒执行var curCount;//当前剩余秒数var code = ""; //验证码var codeLength = 6;//验证码长度function sendMessage（） {curCount = count;var dealType; //验证方式var uid=$（"#uid"）.val（）;//用户uidif （$（"#phone"）.attr（"checked"） == true） {dealType = "phone";}else {dealType = "email";}//产生验证码for （var i = 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", //数据格式:JSONurl: "Login.ashx", //目标地址data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code,error: function （XMLHttpRequest, textStatus, errorThrown） { },success: function （msg）{ }}）;}//timer处理函数function SetRemainTime（） {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程序设计有所帮助。