湛江网站制作专业网络广告联盟
一、需求
1、打开浏览器时，按钮禁用，按钮内容为60秒倒计时
2、倒计时结束时，按钮禁用被取消
二、应用场景
1、60秒内不得重新发送验证码
2、我已阅读用户协议（5s）
三、完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>倒计时按钮</title>
</head>
<body><button disabled>倒计时：60秒</button><script>const button=document.querySelector('button')let i=60let timer=setInterval(()=>{i--button.innerHTML=`倒计时：${i}秒`if(i===0){clearInterval(timer)button.disabled=0 //0：取消按钮的禁用}},1000)</script>
</body>
</html>
四、注意事项
if判断语句一定要放在间歇函数的里面，否则无法终止定时器。
因为如果判断语句放在间歇函数外，判断语句作为同步任务会被放入执行栈中，程序运行时立刻执行且只执行一次。而间歇函数作为异步任务被放入任务队列中等待执行。
相反地，判断语句放在间歇函数里，每隔一秒，都会进行一次判断，直到i为0时终止倒计时。