js实现60秒倒计时效果（使用了jQuery）

Posted 2020-10-03 zeng1994

        今天碰到要实现一个类似那种短信验证码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>