原地址：https://gitee.com/RainVanilla/codes/i7jske4wdogvnb0apmfx571
试了一下，效果还可以，留着备用！
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手机接收验证码按钮</title> <script type="text/javascript" src="static/js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function(){ //替换btn的值 $("#btn").click(function(){ this.value="60秒后重新发送"; //开启定时器 id = setInterval(showTime,1000); flag = false; }); }) var time = 60; var flag = true; var id; function showTime(){ if(time > 0 ){ time--; $("#btn").val(time+"秒后重新发送"); }else { $("#btn").val("重新获取验证码"); flag = true; time=60; clearInterval(id); } } </script> </head> <body> <div> <input type="text" /> <input id="btn" type="button" value="点击发送验证码" /> </div> </body> </html>
上面是原代码，但是如果亲自试一下就会发现有些小问题，就是重复点击按钮的时候会出现bug，在此基础上应该加一个判断，也就是只有跑完60s之后再允许点击事件生效，60s之内不允许调用显示时间的函数，修改代码部分如下：
$(function(){
//替换btn的值
$("#btn").click(function(){
if(time==60){
this.value="60秒后重新发送";
//开启定时器
id = setInterval(showTime,1000);
flag = false;
}
});
})
就是加了一个简单的条件判断，加上之后问题就解决了。
如有不妥请联系我删掉，谢谢。