60秒倒计时按钮

本篇文章介绍一下用 jQuery 和 JavaScript 写一个60秒倒计时按钮。

这个实例适用于发送短信验证码和邮箱验证。下面直接看代码：

一、jQuery：

HTML代码：

<button id="getPhoneCode" type="button">获取验证码</button>
<button id="timedown" type="button" style="display:none;"></button>

jQuery代码：

$("#getPhoneCode").on("click",function(){
	
	var time = 60;

	timedown(time);
	//倒计时
	function timedown(time)
	{
		if(time=='undefined')
		time = 60;

		time = time-1;
		if(time>=0)
		{
			setTimeout(function(){
				timedown(time)
			},1000)
			$("#timedown").html(time+"秒后重新发送");
			$("#timedown").show();
			$("#getPhoneCode").hide();
		}else{
			//倒计时结束
			$("#getPhoneCode").html("重新发送");
			$("#getPhoneCode").show();
			$("#timedown").hide();
		}
	}
});</span>

二、上面是 jQuery 写的方法，下面介绍用 JavaScript 的写法：

HTML代码：

<input type="button" id="btn" value="免费获取验证码" οnclick="timedown(this)" />

JavaScript代码：

<script type="text/javascript"> 
var countdown=60; 
function timedown(obj) {
    if (countdown == 0) {
        obj.removeAttribute("disabled");    
        obj.value="免费获取验证码"; 
        countdown = 60; 
        return;
    } else { 
        obj.setAttribute("disabled", true); 
        obj.value="(" + countdown + ")秒后重新发送";
        countdown--; 
    } 
    setTimeout(function() { 
    	settime(obj)
    },1000)
}

</script>

想看效果怎么样可以自己试试，个人觉得还是不错的，给按钮加上点样式会更好看哟。

如果你有更好的方法可以留下评论，期待与你交流，互相学习。