JS實現60s倒計時(親測有效)，及span標簽如何使用和禁用onclick事件
阿新 • • 發佈：2017-09-11
不可用 class body 1.4 復制 fff -h att pan
效果如下圖：點擊按鈕出現60秒倒計時，60s內按鈕不可用，倒計時到了時間方可再次點擊獲取。
另外還有一個知識點，只有input 及button這樣的表單元素有disbale屬性，如何設置是否可用屬性的方法一般用$("#id").attr(‘disbaled‘,‘true‘)及$("#id").prop(‘disbaled‘,‘false‘)，對span img這樣的沒有disbale的屬性，這種方法就不起作用了，此時可用$("#id").setAttribute(‘onclick‘,function())或$("#id").removeAttribute("onclick")方法來設置事件是否可用。
以下是所有代碼，復制即可使用：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>驗證碼倒計時</title> 5 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 6 <style type="text/css" > 7 .validate-div input{ 8 width:130px; 9 float:left; 10 line-height:30px; 11 } 12 .validation{ 13 float:left; 14 width: 85px; 15 background-color: #2eaef1; 16 border-radius: 5px; 17 margin-left: 20px; 18 text-align: center; 19 margin-top: 3px; 20 } 21 .validation span{ 22 color: #fff; 23 line-height:30px; 24 font-size: 14px; 25 } 26 </style> 27 </head> 28 29 <body> 30 <div class="validate-div"> 31 <input type="text" class="validation-code" id="validation-code" name="smscode" placeholder="輸入驗證碼" > 32 <div class="validation"> 33 <span class="" id="validate_span" onclick="sendsms(this);">獲取驗證碼</span> 34 </div> 35 </div> 36 </body> 37 </html> 38 39 <script type="text/javascript"> 40 //發送驗證碼函數 41 function sendsms(e){ 42 /*發送驗證碼功能*/ 43 countdown(e); //若發送驗證碼成功，則調用倒計時函數 44 } 45 //倒計時函數 46 var time = 10; 47 function countdown(e){ 48 if (time == 0) { 49 //e.setAttribute(‘disabled‘,false); 對沒有disbaled屬性的span標簽，此方法無效 50 e.setAttribute("onclick","sendsms(this)"); 51 $("#validate_span").html("獲取驗證碼"); 52 time = 10; 53 }else{ 54 //e.attr(‘disabled‘,true); 對沒有disbaled屬性的span標簽，此方法也無效 55 //e.setAttribute("onclick", ‘‘); 這樣寫也可以 56 e.removeAttribute("onclick"); 57 $("#validate_span").html("重新發送(" + time + ")"); 58 time--; 59 setTimeout(function() { 60 sendsms(e) 61 },1000) 62 } 63 } 64 </script> 65 </body> 66 </html>
JS實現60s倒計時(親測有效)，及span標簽如何使用和禁用onclick事件