1、第一种:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
settime(this)
});
var countdown = 60;
function settime(obj) {
if (countdown == 0) {
obj.removeAttribute("disabled");
obj.innerHTML = "获取验证码";
countdown = 60;
return;
} else {
obj.setAttribute("disabled", true);
obj.innerHTML = "" + countdown + "秒后再获取";
countdown--;
}
setTimeout(function () {
settime(obj)
}, 1000)
}
});
</script>
</head>
<body>
<button id="btn">获取验证码</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var countdown=60;
function sendemail(){
var obj = $("#btn");
settime(obj);
}
function settime(obj) {
if (countdown == 0) {
obj.attr('disabled',false);
obj.val("免费获取验证码");
countdown = 60;
return;
} else {
obj.attr('disabled',true);
obj.val("重新发送(" + countdown + ")");
countdown--;
}
setTimeout(function() {
settime(obj) }
,1000)
}
</script>
<body>
<input type="button" id="btn" value="免费获取验证码" onclick="sendemail()" />
</body>
</html>