JS實現60s倒計時(親測有效)，及span標籤如何使用和禁用onclick事件
阿新 • • 發佈：2019-02-06
效果如下圖：點選按鈕出現60秒倒計時，60s內按鈕不可用，倒計時到了時間方可再次點選獲取。
另外還有一個知識點，只有input 及button這樣的表單元素有disbale屬性，如何設定是否可用屬性的方法一般用$("#id").attr('disbaled','true')及$("#id").prop('disbaled','false')，對span img這樣的沒有disbale的屬性，這種方法就不起作用了，此時可用$("#id").setAttribute('onclick',function())或$("#id").removeAttribute("onclick")方法來設定事件是否可用。
以下是所有程式碼，複製即可使用：
<!DOCTYPE html> <html> <head> <title>驗證碼倒計時</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style type="text/css" > .validate-div input{ width:130px; float:left; line-height:30px; } .validation{ float:left; width: 85px; background-color: #2eaef1; border-radius: 5px; margin-left: 20px; text-align: center; margin-top: 3px; } .validation span{ color: #fff; line-height:30px; font-size: 14px; } </style> </head> <body> <div class="validate-div"> <input type="text" class="validation-code" id="validation-code" name="smscode" placeholder="輸入驗證碼" > <div class="validation"> <span class="" id="validate_span" onclick="sendsms(this);">獲取驗證碼</span> </div> </div> </body> </html> <script type="text/javascript"> //傳送驗證碼函式 function sendsms(e){ /*傳送驗證碼功能*/ countdown(e); //若傳送驗證碼成功，則呼叫倒計時函式 } //倒計時函式 var time = 10; function countdown(e){ if (time == 0) { //e.setAttribute('disabled',false); 對沒有disbaled屬性的span標籤，此方法無效 e.setAttribute("onclick","sendsms(this)"); $("#validate_span").html("獲取驗證碼"); time = 10; }else{ //e.attr('disabled',true); 對沒有disbaled屬性的span標籤，此方法也無效 //e.setAttribute("onclick", ''); 這樣寫也可以 e.removeAttribute("onclick"); $("#validate_span").html("重新發送(" + time + ")"); time--; setTimeout(function() { countdown(e) },1000) } } </script> </body> </html>