本篇文章介绍一下用 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>
想看效果怎么样可以自己试试,个人觉得还是不错的,给按钮加上点样式会更好看哟。
如果你有更好的方法可以留下评论,期待与你交流,互相学习。