js驗證碼重新傳送倒數計時效果

antzone發表於2017-04-06
JS

大家可能在生活中都有這樣的精力，那就是某個網站需要進行驗證碼驗證。

當點選按鈕之後，按鈕就處於不可用倒數計時狀態，當然完整的功能需要結合後臺實現，不過這裡只介紹一下前臺是如何實現的。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!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>

相關文章