1、setInterval实现

页面加载时自动执行以下脚本：

$(function(){ /************************获取验证码点击事件********************************/ $("#validCode").click(function(){ calTime(); timer = window.setInterval(calTime,1000); }); }); var time = 6; function calTime(){ if(time>0){ $("#validCode").val("("+time+"s)后重发"); $("#validCode").prop("disabled",true); time--; }else{ window.clearInterval(timer); $("#validCode").val("点击重发"); $("#validCode").prop("disabled",false); time = 6; return; } }

该实现通过setInterval函数在页面加载时自动执行，设置了一个定时任务：

每隔1000毫秒调用calTime函数，用于处理验证码发送计时逻辑：

具体实现逻辑如下：

var time = 6; //初始时间设置为6秒 function calTime(){ if(time>0){ //如果时间大于0，显示剩余秒数并禁用按钮 $("#validCode").val("("+time+"s)后重发"); $("#validCode").prop("disabled",true); time--; }else{ //否则清除定时任务，恢复按钮状态 window.clearInterval(timer); $("#validCode").val("点击重发"); $("#validCode").prop("disabled",false); time = 6; return; }

该实现的优点是：

支持多次自动重发

定时任务不会被浏览器中断

页面刷新后自动重新发送

2、setTimeout实现

页面加载时自动执行以下脚本：

$(function(){ /************************获取验证码点击事件********************************/ $("#validCode").click(function(){ calTime(); }); }); var time = 6; function calTime(){ if(time>0){ $("#validCode").val("("+time+"s)后重发"); $("#validCode").prop("disabled",true); time--; }else{ $("#validCode").val("点击重发"); $("#validCode").prop("disabled",false); time = 6; return; } window.setTimeout(calTime,1000); }

该实现通过setTimeout函数在页面加载时自动执行，设置了一个单次定时任务：

每隔1000毫秒调用calTime函数，用于处理验证码发送计时逻辑：

具体实现逻辑如下：

var time = 6; //初始时间设置为6秒 function calTime(){ if(time>0){ //如果时间大于0，显示剩余秒数并禁用按钮 $("#validCode").val("("+time+"s)后重发"); $("#validCode").prop("disabled",true); time--; }else{ //否则清除定时任务，恢复按钮状态 $("#validCode").val("点击重发"); $("#validCode").prop("disabled",false); time = 6; return; } //window.setTimeout("calTime()",1000); window.setTimeout(calTime,1000); }

该实现的优点是：