點擊按鈕的以後,按鈕進行30S倒計時this
HTMLspa
<input type="button" id="getCode" name="" value="獲取驗證碼" class="btnCode"/>
CSScode
.btnCode { width: 40%; height: 42px; background: #FFF; color: #323333; font-size: 14px; line-height: 42px; } .btnCodeDisabled { background: #ccc; }
JSblog
$(function(){ var wait=30; function time(obj) { if (wait == 0) { obj.className='btnCode'; obj.removeAttribute("disabled"); obj.value=""; wait = 30; } else { obj.className='btnCodeDisabled';//按鈕變灰,不可點擊 obj.setAttribute("disabled", true); obj.value="從新發送("+ wait +")"; wait--; setTimeout(function() { time(obj) }, 1000) } } document.getElementById("getCode").onclick=function(){time(this);} })