js验证码重新发送倒计时效果

快乐打工仔 分类:实例代码

大家可能在生活中都有这样的精力,那就是某个网站需要进行验证码验证。

当点击按钮之后,按钮就处于不可用倒计时状态,当然完整的功能需要结合后台实现,不过这里只介绍一下前台是如何实现的。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>前端教程网</title>
<script type="text/javascript"> 
var countdown=60; 
function settime(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) 
} 
window.onload=function(){
  var obt=document.getElementById("btn");
  obt.onclick=function(){
    settime(this)
  }
}
</script> 
</head> 
<body> 
<input type="button" id="btn" value="免费获取验证码"/> 
</body> 
</html>

回复

我来回复
  • 暂无回复内容