js實現60秒倒計時效果（使用了jQuery）

        今天碰到要實現一個類似那種短信驗證碼60秒倒計時的需求，好久不寫js，有點手生。把代碼記錄下，方便后續查閱。

這里我用了jQuey，畢竟寫起來簡潔點。下面直接看效果和代碼。

一、效果

                                            

                                     

二、代碼

（1）html

<input type="button" id="btn" value="免費獲取驗證碼" onclick="daojishi(10,this)" />  

1

 

1

<input type="button" id="btn" value="免費獲取驗證碼" onclick="daojishi(10,this)" />  

        注意： 要引入JQuery

（2）js

<script type="text/javascript"> 
	function daojishi(seconds,obj){
		if (seconds > 1){
				seconds--;
				$(obj).val(seconds+"秒后可重新獲取 ").attr("disabled", true);//禁用按鈕
				// 定時1秒調用一次
				setTimeout(function(){
					daojishi(seconds,obj);
				},1000);
			}else{
				$(obj).val("免費獲取驗證碼").attr("disabled", false);//啟用按鈕
			}
	}
</script> 

 

1

<script type="text/javascript"> 

2

 function daojishi(seconds,obj){

3

  if (seconds > 1){

4

    seconds--;

5

    $(obj).val(seconds+"秒后可重新獲取 ").attr("disabled", true);//禁用按鈕

6

    // 定時1秒調用一次

7

    setTimeout(function(){

8

     daojishi(seconds,obj);

9

    },1000);

10

   }else{

11

    $(obj).val("免費獲取驗證碼").attr("disabled", false);//啟用按鈕

12

   }

13

 }

14

</script>