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）} },}

代码二:

<！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></title> <script src="HTML/js/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript">/*-------------------------------------------*/var InterValObj; //timer变量，控制时间var count = 5; //间隔函数，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", //数据格式:JSON url: "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 + "秒内输入验证码"）; }} </script></head><body><input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage（）" /></p></body></html>

代码三：

<！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>10之后注册</title> <script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript">var leftSeconds = 10;//倒计时时间10秒var intervalId;$（function （） { $（"#btn_reg"）.attr（"disabled", true）;//设置按钮不可用 intervalId = setInterval（"CountDown（）",1000）;//调用倒计时的方法}）;function CountDown（） {//倒计时方法 if （leftSeconds <= 0） {$（"#btn_reg"）.val（"注册"）; //当时间<=0的时候改变按钮的value$（"#btn_reg"）.attr（"disabled",false）;//如果时间<=0的时候按钮可用clearInterval（intervalId）; //取消由 setInterval（） 设置的 timeoutreturn; } leftSeconds--; $（"#btn_reg"）.val（"请仔细阅读"+leftSeconds+"秒"）;} </script></head><body><textarea cols="20" rows="8">10秒之后注册按钮才可以使用</textarea><input type="button" value="注册" id="btn_reg" /></body></html>

代码四：

<！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></title> <script src="HTML/js/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript">/*-------------------------------------------*/var InterValObj; //timer变量，控制时间var count = 5; //间隔函数，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", //数据格式:JSON url: "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 + "秒内输入验证码"）; }} </script></head><body><input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage（）" /></p></body></html>

代码五：

最近在写短信发送验证码，就写了个js/jquery倒计时发送验证码按钮<script language="javascript" src="jquery-1.7.1.min.js"></script><input type="button" id="btn" value="免费获取验证码" /><script type="text/javascript">var wait=10;function time（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>