发送短信倒计时案例

最新推荐文章于 2024-05-17 13:52:13 发布

m_0_1_0_1

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量157

点赞数

分类专栏： Dom 文章标签： javascript

本文链接：https://blog.csdn.net/m_0_1_0_1/article/details/123951722

版权

Dom 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

思路：

每次点击完按钮的时候，都会将按钮禁用一段时间，需要将按钮的disabled设为true即可。

点击完之后按钮里面的内容发生变化（button里面的内容通过innerHTML来获取）。

内容里面的秒表数是不断的变化的，因此需要一个定时器。同时需要定义一个变量，在定时器里面，不断递减。当变量的为0的时候。说明时间到了需要停止定时器。并且还需要复原按钮原始的状态（按钮里面的内容）。

注：恢复完原始状态之后不要忘记将变量的值也恢复原始数值，便于连续使用定时器的倒计时效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    手机号码：<input type="number" /><button>发送</button>
    <script>
        var btn = document.querySelector("button");
        var num = 5;//定义剩下的秒数
        btn.addEventListener("click", function() {
            btn.disabled = true;
            var timer = setInterval(function() {
                if (num == 0) {
                 //清除定时器和复原定时器
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = "发送";
                    num = 3; //不要忘记还要从原来的num数重新开始
                } else {
                    btn.innerHTML = "还剩" + num + "秒";
                    num--;
                }
            }, 1000);
        });
    </script>
</body>

</html>

m_0_1_0_1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
发送短信倒计时案例

思路：每次点击完按钮的时候，都会将按钮禁用一段时间，需要将按钮的disabled设为true即可。点击完之后按钮里面的内容发生变化（button里面的内容通过innerHTML来获取）。内容里面的秒表数是不断的变化的，因此需要一个定时器。同时需要定义一个变量，在定时器里面，不断递减。当变量的为0的时候。说明时间到了需要停止定时器。并且还需要复原按钮原始的状态（按钮里面的内容）。注：恢复完原始状态之后不要忘记将变量的值也恢复原始数值，便于连续使用定时器的倒计时效果。<!DO.
复制链接

扫一扫