HTML+CSS+JavaScript：验证码60秒倒计时按钮

最新推荐文章于 2024-05-22 10:11:16 发布

早八睡不醒午觉睡不够的程序猿

最新推荐文章于 2024-05-22 10:11:16 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/lbcbjtlhmjq/article/details/131991105

版权

一、需求

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=60
        let timer=setInterval(()=>{
            i--
            button.innerHTML=`倒计时：${i}秒`
            if(i===0){
                clearInterval(timer)
                button.disabled=0 //0：取消按钮的禁用
            }
        },1000)
    </script>
</body>
</html>

四、注意事项

if判断语句一定要放在间歇函数的里面，否则无法终止定时器。

因为如果判断语句放在间歇函数外，判断语句作为同步任务会被放入执行栈中，程序运行时立刻执行且只执行一次。而间歇函数作为异步任务被放入任务队列中等待执行。

相反地，判断语句放在间歇函数里，每隔一秒，都会进行一次判断，直到i为0时终止倒计时。

早八睡不醒午觉睡不够的程序猿

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JavaScript：验证码60秒倒计时按钮

1、打开浏览器时，按钮禁用，按钮内容为60秒倒计时2、倒计时结束时，按钮禁用被取消。
复制链接

扫一扫