按钮被点击后屏蔽点击且倒计时60S能再次被点击-JS实现和JQuery实现

2017-01-13 14:58:40来源:csdn作者:qq_26525215人点击


转载请注明出处:http://blog.csdn.net/qq_26525215
本文源自【大学之旅_谙忆的博客】


这个主要是用在手机验证码注册的时候用的多, 比如:

正如上图所示那样-60S后还会还原、 直接上代码:

<input type="button" id='codeBtn' value="免费获取验证码"></input>
<script src="js/reg.js"></script>
//(我是分开写的--后面的代码我是导入的)
var wait = 60;
function time(btn) {
if(wait == 0) {
btn.removeAttribute("disabled");
btn.value = "免费获取验证码";
wait = 60;
} else {
btn.setAttribute("disabled", true);
btn.value = "重新发送(" + wait + ")";
wait--;
setTimeout(function() {
time(btn)
},
1000)
}
}
document.getElementById("codeBtn").onclick = function() {
time(this);
}

JQuery代码实现:

<input type="button" value="免费获取验证码" />//(我是分开写的--后面的代码我是导入的)$(function() {
$(function() {
$("#btn").click(settime);
});
});
var countdown = 60;
function settime() {
if(countdown == 0) {
$("#btn").attr("disabled", false);
$("#btn").attr("value", "免费获取验证码");
countdown = 60;
} else {
$("#btn").attr("disabled", true);
$("#btn").attr("value", "重新发送(" + countdown + ")");
countdown--;
setTimeout(settime, 1000)
}
}

本文章由[谙忆]编写, 所有权利保留。


转载请注明出处:http://blog.csdn.net/qq_26525215
本文源自【大学之旅_谙忆的博客】



最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台