原生实现方法：
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js实现倒计时60秒的简单代码(推荐)</title> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /> <script type="text/javascript"> var countdown=60; function settime(val) { if (countdown == 0) { val.removeAttribute("disabled"); val.value="免费获取验证码"; countdown = 60; } else { val.setAttribute("disabled", true); val.value="重新发送(" + countdown + ")"; countdown--; setTimeout(function() { settime(val) },1000) } } </script> </body> </html>
jQuery实现方法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery实现倒计时</title> <body> <input type="button" id="btn" value="免费获取验证码" onclick="sendemail()" /> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.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> </html>
感谢阅读！