直接上代码，亲自测试了的，没问题咯
第一种是按钮上直接显示倒计时，
<html> <head> <title>点击获取验证码按钮后按钮变灰，倒计时一段时间后又可重复点击</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script> </head> <body> <input type="button" id="btn" value="免费获取验证码" onclick="timer(10)" /> <script type="text/javascript"> function timer(time) { var btn = $("#btn"); btn.attr("disabled", true); //按钮禁止点击 btn.val(time <= 0 ? "免费获取验证码" : ("" + (time) + "秒后可发送")); var hander = setInterval(function() { if (time <= 0) { clearInterval(hander); //清除倒计时 btn.val("免费获取验证码"); btn.attr("disabled", false); return false; }else { btn.val("" + (time--) + "秒后可发送"); } }, 1000); } </script> </body> </html>
第二种效果是点击按钮后，按钮被禁用，在另一处显示倒计时
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js">
</script>
<style>
* {
margin: 0;
padding: 0;
}
#ant {
150px;
height: 50px;
color: red;
text-align: center;
line-height: 50px;
margin: 0px auto;
}
</style>
<script>
function test() {
var count = 10;
var timer = null;
timer = setInterval(function () {
if (count > 0) {
count = count - 1;
$("#ant").html(count + "秒后再试");
$("#sendCode").attr("disabled", "disabled");
}
else {
$("#sendCode").removeAttr("disabled", "disabled");
$("#sendCode").html("发送验证码");
clearInterval(timer);
}
}, 1000);
}
</script>
</head>
<body>
<input type="button" value="发送验证码" onclick="test()" id="sendCode" />
<div id="ant">0</div>
</body>
</html>
有的朋友说第一种有问题，当使用来发送短信的时候，会发送两条短信，毛病还没找到，有解决了的大神麻烦指点下，谢谢了