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>