发送短信（js小案例）

最新推荐文章于 2022-06-22 15:12:38 发布

~嘘~禁止想象~

最新推荐文章于 2022-06-22 15:12:38 发布

阅读量422

点赞数 4

分类专栏： # JavaScript小练习前端文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_45773503/article/details/106210439

版权

前端同时被 2 个专栏收录

150 篇文章 5 订阅

订阅专栏

JavaScript小练习

36 篇文章 1 订阅

订阅专栏

在这里插入图片描述

按钮点击之后，会禁用 disabled 为 true
同时按钮里面的内容会变化，注意 button 里面的内容通过 innerHTML 修改
里面的秒数是有变化的，因此需要用到定时器
定义一个变量，在定时器里面，不断递减
如果变量为0，我们需要停止定时器，并且复原按钮的初始状态

原本使用的两个定时器（有点冗余了）

<!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>
    <form action="">
        <input type="text" class="xzm">
        <button type="submit" class="submit">发送</button>
    </form>

    <script>
        var submit = document.querySelector('.submit');
        console.log(submit);

        submit.addEventListener('click', function() {
            submit.disabled = true;

            var count = 60;
            downCount();
            var timer1 = setInterval(downCount, 1000)

            function downCount() {
                submit.innerHTML = '还剩' + count + '秒';
                count--;
            }

            var timer2 = setTimeout(function() {
                clearInterval(timer1);
                submit.disabled = false;
                submit.innerHTML = '发送';
            }, 60000)
        })
    </script>
</body>

</html>

改进了一下用一个计时器

<!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>
    <form action="">
        <input type="text" class="xzm">
        <button type="submit" class="submit">发送</button>
    </form>

    <script>
        var submit = document.querySelector('.submit');
        console.log(submit);

        submit.addEventListener('click', function() {
            submit.disabled = true;

            var count = 60;
            downCount();
            var timer1 = setInterval(downCount, 1000)

            function downCount() {
                submit.innerHTML = '还剩' + count + '秒';
                count--;
                if (count == 0) {
                    clearInterval(timer1);
                    submit.disabled = false;
                    submit.innerHTML = '发送';
                }
            }
        })
    </script>
</body>

</html>

~嘘~禁止想象~

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
发送短信（js小案例）

按钮点击之后，会禁用 disabled 为 true同时按钮里面的内容会变化，注意 button 里面的内容通过 innerHTML 修改里面的秒数是有变化的，因此需要用到定时器定义一个变量，在定时器里面，不断递减如果变量为0，我们需要停止定时器，并且复原按钮的初始状态原本使用的两个定时器（有点冗余了）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫