您的位置:首页 > Web前端 > JQuery

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

2016-10-11 00:34 573 查看
这个主要是用在手机验证码注册的时候用的多, 

比如:



正如上图所示那样-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" id="btn" 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)
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐