Pink老师JavaScript课堂案例 - 发送验证码60秒倒计时效果

最新推荐文章于 2024-02-03 11:02:39 发布

Codefreyy

最新推荐文章于 2024-02-03 11:02:39 发布

阅读量323

点赞数

分类专栏：课程案例文章标签： javascript 前端

本文链接：https://blog.csdn.net/godfreyyyy/article/details/123609739

版权

课程案例专栏收录该内容

26 篇文章 2 订阅

订阅专栏

效果

以3秒为例

代码

<body>
    <input type="text">
    <button>发送验证码</button>
    <script>
        //获取元素 
        var btn = document.querySelector('button');
        var time = 59;
        btn.addEventListener('click', function () {
            btn.disabled = true;
            var timer = setInterval(function () {
                if (time == 0) {
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML='发送验证码';
                    time = 59;
                }
                else {
                    btn.innerHTML='等待'+time+'秒';
                    time--;
                }

            }, 1000);
        })
    </script>
</body>

Codefreyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Pink老师JavaScript课堂案例 - 发送验证码60秒倒计时效果

btn.addEventListener('click', function () { btn.disabled = true; var timer = setInterval(function () { if (time == 0) { clearInterval(timer); btn.disabled = false;
复制链接

扫一扫