纯js实现重发验证码按钮倒数功能
代码一:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>无标题文档</title> <scripttype="text/javascript"src="js/jquery.js"></script> </head> <body> <inputtype="button"id="btn"value="免费获取验证码"onclick="settime(this)"/> <scripttype="text/javascript"> varcountdown=60; functionsettime(val){ if(countdown==0){ val.removeAttribute("disabled"); val.value="免费获取验证码"; countdown=60; }else{ val.setAttribute("disabled",true); val.value="重新发送("+countdown+")"; countdown--; } setTimeout(function(){ settime(val) },1000) } </script> </body> </html>
代码二:
注册的时候需要发送验证激活帐号的邮件,为了避免邮件的多次重复发送,所以可以在点击了发送后,设置button要过一段时间才能继续点击。下面是一个简单的例子:
<html> <head> <title>点击获取验证码按钮后按钮变灰,倒计时一段时间后又可重复点击</title> </head> <body> <inputtype="button"id="btn"value="免费获取验证码"/> <scripttype="text/javascript"> varwait=60; functiontime(o){ if(wait==0){ o.removeAttribute("disabled"); o.value="免费获取验证码"; wait=60; }else{ o.setAttribute("disabled",true); o.value=wait+"秒后可以重新发送"; wait--; setTimeout(function(){ time(o) }, 1000) } } document.getElementById("btn").onclick=function(){time(this);} </script> </body> </html>