1 需求

发送短信以后，再次发送短信按钮变得不可用，倒计时60秒以后才可以使用

2 步骤

创建按钮倒计时的方法：function countDown(count)，在发送短信请求以后调用

1. 发送短信按钮不可用

2. 每过1秒调用1次匿名函数

3. 匿名函数中计数减1

4. 按钮上的文字变为：x秒后可再次发送验证码

5. 如果计数变为0

6. 按钮变得可用

7. 文本变成：发送手机验证码

8. 清除计时器

3 代码

//发送短信的按钮
$("#sendSmsCode").click(function () {//获取手机号let telephone = $("#telephone").val().trim();//验证手机格式let reg = /^1[35789]\d{9}$/;if (reg.test(telephone)) {//清空$("#telephoneInfo").text("");//验证通过，后台访问服务器$.get({url:"user",data: {action: "sendSms",telephone: telephone},success: function (resultInfo) {//发送成功if (resultInfo.success) {$("#msg").css("color", "green").text(resultInfo.message);}//发送失败else {$("#msg").css("color", "red").text(resultInfo.message);}}});//调用倒计时countDown(10);}else {//验证不通过$("#telephoneInfo").css("color", "red").text("手机号格式错误");//选中手机号$("#telephone").select();}
});/*** 倒计时* @param count 秒数*/
function countDown(count) {//1. 发送短信按钮不可用$("#sendSmsCode").prop("disabled", true);//2. 每过1秒调用1次匿名函数, 获取返回值，用来清除计时器let timer = setInterval(function () {//3. 匿名函数中计数减1count--;//4. 按钮上的文字变为：x秒后可再次发送验证码$("#sendSmsCode").val(count + "秒后可再次发送验证码");//5. 如果计数变为0if (count == 0) {//6. 按钮变得可用$("#sendSmsCode").prop("disabled", false);//7. 文本变成：发送手机验证码$("#sendSmsCode").val("发送手机验证码");//8. 清除计时器clearInterval(timer);}}, 1000);
}